React Native Navigation：在另一个文件的函数内部时无法在堆栈之间导航

Question

I'm having a bit of problem with how navigation works in React Native .
Basically what I'm trying to do is this :\\

While I'm in the Home stack navigate to the SubFeed stack from the Feed function called in Home .

Here is my code

function Home({ navigation }) {

return (
    <ScrollView>
        <Feed/>
    </ScrollView>

Home.js

function Feed({ navigation }) {

return (
    <View>
        <Button title="nav1" 
                onPress={() => navigation.navigate('SubFeed')}/>
        <Button title="nav2" 
                onPress={() => navigation.navigate('Home', {screen: 'SubFeed'})}/>
    </View>

Feed.js

The problem is that whenever I try to press either of the buttons I keep getting the same error:

TypeError: undefined is not an object (evaluating 'navigation.navigate') \\

When I search for an answer I keep seeing things about screens but it doesn't seem to be working in my case.

• I think the problem comes from the fact that I try to change the stack outside from home, but I can't understand why.

If you have any suggestion or even better the answer to my problem I would really appreciate it.

Answer 1

In your code, Feed component doesn't know about navigation property. So, you can pass it as a prop form the parent Home or you can use react-navigation-hooks and use const { navigate } = useNavigation(); inside Feed component.