React Native Navigation 外部文件函数内无法跨栈跳转问题

只有直接注册为Stack.Screen的component参数的组件，才会被React Navigation自动注入navigation属性。你这里的Feed组件是在Home（对应路由名Project）内部手动渲染的子组件，没有拿到自动注入的navigation，所以解构出来是undefined，调用navigate就会触发报错。

• 方案1：属性透传
  在Home组件渲染Feed的时候，把自身拿到的navigation属性手动传给Feed即可，修改Home.js的渲染代码：

<Feed navigation={navigation}/>

• 方案2：使用useNavigation钩子
  不需要透传属性，直接在Feed组件内部调用官方提供的useNavigation钩子获取导航实例，修改Feed.js代码：

import { useNavigation } from '@react-navigation/native'

function Feed() {
  // 直接获取导航实例，不需要从props解构
  const navigation = useNavigation()

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

你当前的栈配置里没有名为Home的路由，你配置的首页路由名是Project，所以原来的nav2按钮的写法是错误的，就算navigation正常拿到也会触发路由找不到的报错。如果你要跳转到SubFeed，直接用nav1的写法navigation.navigate('SubFeed')即可，不需要嵌套screen参数，因为你的SubFeed是根栈的同级路由，不是嵌套在Home栈下的子路由。

内容的提问来源于stack exchange，提问作者Arthur