通过路由传递状态.参数与React导航返回undefined

Question

我试图在我的React Native应用程序中传递一个'passcode'状态作为参数。

我是通过传递参数到'navigation来做到这一点的。导航的电话。

然而，每次我导航到下一个屏幕，它返回'undefined'对于'route.params'。

作为参考，这是我的组件，我正在传递数据:

const SignUpPasscodeScreen = ({ navigation }) => {
const [passcode, setPasscode] = useState(0)
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Set passcode" />
<SubHeading content="You'll need this anytime you need to access your account." />
<Input inputText={ text => setPasscode(text) } inputValue={passcode} />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate({ routeName: 'SignUpLegalName', params: { passcode } } ) } />
</View>
</View>
)
}

这是我传递数据的组件，在导航时发生错误:

const SignUpLegalName = ({ route, navigation }) => {
const { passcode } = route.params
return (
<View>
<View style={styles.mainView}>
<SubLogo />
<Heading title="Tell us your name" />
<SubHeading content="This needs to be the same as what's on your passport, or any other form of recognised ID." />
<Input />
<Input />
</View>
<View style={styles.subView}>
<CtaButton text="Continue" onPressFunction={ () => navigation.navigate('SignUpLink')} />
</View>
</View>
)
}

我尝试了两种传递props的形式:

1. 作为第二个参数传入
2. 将其作为'params'对象传入，如上所示

两者都应该根据文档工作-链接在这里

作为参考，这是我的路由结构:

const switchNavigator = createSwitchNavigator({
loginFlow: createStackNavigator({
SignUpPasscode: SignUpPasscodeScreen,
SignUpLegalName: SignUpLegalName,
})
});

上面的结构并没有告诉我它是一个嵌套结构，因此需要任何额外的工作来传递它…

有人能帮忙吗?我会很感激的，因为它让我头疼!

Answer 1

在按钮按下事件中尝试使用下面的代码:

<CtaButton 
text="Continue" 
onPressFunction={() => navigation.navigate('SignUpLegalName',{ passcode })}
/>