如何在 React Native 中的类组件中引入路由参数?
2021-10-20
868
我正在开发一个旧的 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>
);
}
}
Tutorial.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 时,我想根据 isJobOwner 是真还是假导航到 FindEmployers 或 FindJobs 屏幕。
我知道这很简单,但如果能提供任何快速建议,我将不胜感激!非常感谢。
2个回答
如果您使用的是 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 了解更多信息
Eduardo Ramos
2021-10-20
您的代码是错误的。
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
corasphinx
2021-10-20