React Native类组件中如何获取路由传递参数并实现条件页面跳转

问题原因 #

你传递参数的逻辑是对的，问题出在Tutorial页面读取isJobOwner的方式错误：旧版React Navigation中，路由传递的参数不会直接挂载到this.props根属性上，需要从路由专属字段中读取。

修复方案 #

根据你项目使用的React Navigation版本选择对应的写法即可：

版本 < 5（你当前代码大概率是这个版本）

直接修改Tutorial.js的onNextStep方法，从navigation.state.params读取参数：

onNextStep() {
    // 加可选链和默认值避免未传参时报错
    const isJobOwner = this.props.navigation.state.params?.isJobOwner ?? false;
    this.props.navigation.navigate(
        isJobOwner ? 'FindEmployers' : 'FindJobs'
    );
}

如果多处用到这个参数，可以提前存到state里，避免重复写读取逻辑：

constructor(props) {
    super(props);
    this.state = {
        isLoading: false,
        isJobOwner: props.navigation.state.params?.isJobOwner ?? false
    };
}

onNextStep() {
    this.props.navigation.navigate(
        this.state.isJobOwner ? 'FindEmployers' : 'FindJobs'
    );
}

版本 >=5

如果你的项目依赖是React Navigation 5及以上，参数读取方式改为从route.params读取：

onNextStep() {
    const isJobOwner = this.props.route.params?.isJobOwner ?? false;
    this.props.navigation.navigate(
        isJobOwner ? 'FindEmployers' : 'FindJobs'
    );
}

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