React Navigation 4.x调用props.navigation.navigate报undefined错误如何解决

• react-navigation 4.x 仅会为直接注册到路由配置中的页面组件自动注入navigation属性，你当前的NextButton是自定义通用组件，没有注册为路由页面，因此默认无法拿到navigation属性，调用props.navigation.navigate时就会抛出undefined类型错误。

你可以任选以下任意一种方案解决问题：

方案1：父组件透传navigation属性 #

你配置中注册为Intro路由的Onboarding组件是标准路由页面，本身自带navigation属性，只需要在Onboarding内引用NextButton的位置，将navigation作为属性传递即可：

// Onboarding组件中引入NextButton的代码
<NextButton navigation={props.navigation} />

方案2：使用withNavigation高阶组件自动注入 #

如果NextButton需要在多个页面复用，不想每次都手动传递navigation属性，可以使用react-navigation 4.x内置的withNavigation高阶组件实现自动注入，修改NextButton代码如下：

import React from 'react';
import { View, Button } from 'react-native';
// 引入高阶组件
import { withNavigation } from 'react-navigation';

const NextButton = props => {
    return (
        <View>
            <Button 
                onPress={() => {
                    // 此处也可简化为props.navigation.navigate('Login')，和传对象写法效果一致
                    props.navigation.navigate({ routeName: 'Login' })
                }} 
                title="Go To" 
            />
        </View>
    );
}
// 导出时用高阶组件包裹
export default withNavigation(NextButton);

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