通过 route.params 传递状态，React Navigation 返回 undefined

Question

我正在尝试在我的 React Native 应用程序中将“密码”状态作为参数传递。

我通过将参数传递给“navigation.navigate”调用来做到这一点。

但是，每次我导航到下一个屏幕时，它都会为“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>
  )
}

我尝试了两种传递道具的方式：

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

两者都应该根据文档工作 - 链接here

作为参考，这是我的路线结构：

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

上面的结构并没有告诉我它是一个嵌套结构，因此需要任何额外的工作才能通过它...

有人可以帮忙吗？不胜感激，因为它让我头疼！

Answer 1

在按钮按下事件中尝试以下代码：

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