Expo集成react-navigation调用props.navigation.navigate报错如何解决

问题原因 #

只有被直接注册到react-navigation导航器中的路由页面（你代码里的GetStarted、Home）才能自动拿到navigation属性。WalkthroughScreen是GetStarted内部调用的子组件，你没有把父组件拿到的navigation属性传递给它，所以props.navigation是undefined，调用navigate方法就会抛出对应报错。

解决方法 #

修改GetStarted页面中调用WalkthroughScreen的代码，把navigation属性传递过去即可：

<WalkthroughScreen
  appConfig={WalkthroughAppConfig}
  appStyles={DynamicAppStyles}
  navigation={navigation} // 新增这行传值
/>

如果要完善PropTypes校验避免警告，可以给WalkthroughScreen的propTypes补充navigation的声明：

WalkthroughScreen.propTypes = {
  appStyles: PropTypes.object,
  appConfig: PropTypes.object,
  navigation: PropTypes.object.isRequired, // 新增校验规则
};

如果你后续升级到react-navigation v5及以上版本，也可以不用传props，直接在子组件内用useNavigation钩子获取导航实例，适配性更强。

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