React Native 在路由中传递参数变得未定义

Question

我正在尝试将参数从屏幕 A 发送到屏幕 B，如下所示：

这是我目前正在尝试的：

   await Auth.signIn(email, password)
    .then((user) => {
      navigation.navigate('SingInConfirm', {user: user});
    })

在我的屏幕 B 上，我想像这样记录用户参数..

const SingInConfirmation = ({ route, signIn: signInCb  }) => {
const { user } = route.params;

但我收到此错误：TypeError: undefined is not an object (evaluating 'route.params')

这是我的 StackNavigator

const AuthStack = createStackNavigator();
const AuthModalStack = createStackNavigator();

const AuthNavigator = ({ signIn }) => (
  <AuthModalStack.Navigator mode="modal" headerMode="none">
    <AuthModalStack.Screen name="AuthPages">
      {() => (
        <AuthStack.Navigator>
          <AuthStack.Screen name="SignIn" component={SignInScreen} />
        </AuthStack.Navigator>
      )}
    </AuthModalStack.Screen>
    <AuthModalStack.Screen name="SingInConfirm">
            {({ navigation }) => <SingInConformation signIn={signIn} navigation={navigation} />}
    </AuthModalStack.Screen>
  </AuthModalStack.Navigator>
);

export default AuthNavigator;

为什么我不能在我的屏幕 B 上调用路由参数？

Answer 1

SingInConformation 组件在此行中没有收到 route 作为道具，您需要提供它，将这一行更改为：

{({ navigation }) => <SingInConformation signIn={signIn} navigation={navigation} />}

到这里：

{({ route, navigation }) => <SingInConformation signIn={signIn} navigation={navigation} route={route} />}