React Native中Bottom组件点击无法跳转RegisterScreen问题求助

问题原因 #

存在两处核心错误导致跳转失败：

1. App.js中自定义LoginScreen的渲染逻辑时，没有将React Navigation自动注入的navigation属性传递给LoginScreen组件
2. LoginScreen中向Bottom组件传递navigation时使用了解构写法，导致Bottom组件接收到的navigation为undefined

修复方案 #

第一步 修改App.js中Login路由的渲染逻辑 #

将Login对应的Stack.Screen部分修改为：

<Stack.Screen name='Login' >
  {(props) => <LoginScreen {...props} {...mock}/>}
</Stack.Screen>

这里的props是React Navigation自动传递给路由组件的参数，包含navigation、route两个核心属性，手动展开传入即可让LoginScreen拿到可用的navigation对象。

第二步 修改LoginScreen中传递navigation给Bottom组件的写法 #

将Bottom组件的调用部分修改为：

<Bottom {...bottom} navigation={navigation}/>

原来的{...navigation}会把navigation对象内部的方法直接拆成独立属性传递，而Bottom组件需要的是完整的navigation对象，改为直接传navigation={navigation}即可。

验证 #

修改完成后重启项目，点击Bottom中的按钮即可正常跳转至RegisterScreen，无需修改其他代码。

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