如何在 React Native 的类组件中引入路由参数？答案

【问题标题】：How to pull in route parameters in class components within React Native?如何在 React Native 的类组件中引入路由参数？
【发布时间】：2021-12-07 05:11:53
【问题描述】：

我正在开发一个旧的 React Native 应用程序并且不熟悉基于类的组件，我有一个布尔值 (isJobOwner)，我想将它从一个屏幕传递到另一个屏幕，然后在下一个屏幕上检查是否isJobOwner 布尔值是真还是假，在这种情况下，我将根据使用三元运算符的真假值将用户带到最终屏幕。

我的 2 个文件目前如下所示：

SignUpChoice.js：

class SignUpChoice extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        header: (
            <Header
                leftComponent={<GoBackComponent onPress={() => navigation.goBack()} />}
                containerStyle={commonStyles.headerContainer}
                centerComponent={<CustomHeader name="Account Type" />}
            />
        ),
    });

    onChooseRole(isJobOwner) {
        saveRole(isJobOwner ? 'owner' : 'seeker');
        NavigationService.navigate('Tutorial', { isJobOwner: isJobOwner });
    }

    render() {
        return (
            <Container>
                <Content>
                    <View style={styles.signUpChoiceContainer}>
                        <Button
                            style={styles.jobButton}
                            onPress={() => this.onChooseRole(true)}
                        >
                            <Text style={styles.jobText}>
                                Are you looking for a Tradesman?
                            </Text>
                        </Button>
                        <Button
                            style={styles.jobButton}
                            onPress={() => this.onChooseRole(false)}
                        >
                            <Text style={styles.jobText}>Are you looking for work?</Text>
                        </Button>
                    </View>
                </Content>
            </Container>
        );
    }
}

教程.js：

class Tutorial extends React.Component {
    static navigationOptions = { header: null };

    constructor(props) {
        super(props);

        this.state = {
            isLoading: false,
        };
    }

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

    onGoBack() {
        this.props.navigation.navigate('SignUpChoice');
    }

    render() {

        return (
            <Container>
                {(this.props.requesting || this.state.isLoading) && (
                    <Loader size={'large'} color={colors.white} />
                )}
                <Content contentContainerStyle={{ height: '100%' }}>
                    <View style={styles.buttonsContainer}>
                        <Button
                            transparent
                            style={styles.tutorialButton}
                            onPress={() => this.onNextStep()}
                        >
                            <Text style={styles.tutorialButtonText}>Next Step</Text>
                        </Button>
                        <Button
                            transparent
                            style={styles.backButton}
                            onPress={() => this.onGoBack()}
                        >
                            <Text style={styles.backButtonText}>Go Back</Text>
                        </Button>
                    </View>
                </Content>
            </Container>
        );
    }
}

单击 onNextStep 时，我想导航到 FindEmployers 或 FindJobs 屏幕，具体取决于 isJobOwner 是真还是假。

我知道这很简单，但任何快速的建议将不胜感激！非常感谢。

【问题讨论】：

标签： reactjs react-native parameters routes state

【解决方案1】：

如果您使用reactnavigation，您可以：

this.props.navigation.navigate('Tutorial', { isJobOwner: isJobOwner });

然后检索路由参数：

class Tutorial extends React.Component {
  render() {
     const { navigation } = this.props;    
     const isJobOwner = navigation.getParam('isJobOwner', false);
     ...
  }
}

查看文档https://reactnavigation.org/docs/3.x/params 了解更多信息

【讨论】：

嗨，是的，它使用的是 React Navigation 3，所以一切都有些过时了，但谢谢，这似乎运作良好，正是我所需要的，不胜感激！

【解决方案2】：

你的代码错了。

this.props.isJobOwner

这是正确的代码。

this.props.route.params.isJobOwner

请使用console.info(this.props.route.params)进行测试

总之，

第一个屏幕：this.props.navigation.navigate('Tutorial', { isJobOwner: isJobOwner })

第二屏：console.info(this.props.route.params.isJobOwner

【讨论】：