如果通过用户输入获取道具，如何通过抽屉导航传递道具？

Question

我正在构建一个带有登录屏幕的应用程序，我希望能够将电子邮件 (this.state.email) 的属性传递到另一个屏幕。但是，我无法直接导航到该屏幕；我通过抽屉来做。我如何从用户的电子邮件输入中获取道具，这可以根据他们使用的登录帐户而改变，并通过抽屉将其发送到另一个屏幕？

我的屏幕：

 <Drawer.Navigator
      initialRouteName="Home"
      drawerType="slide"
      overlayColor="transparent"
      drawerStyle={styles.drawerStyles}
      contentContainerStyle={{flex: 1}}
      screenOptions={{
        headerShown: false,
        activeBackgroundColor: 'transparent',
        activeTintColor: 'white',
        inactiveTintColor: 'white',
      }}
      sceneContainerStyle={{backgroundColor: 'transparent'}}
      drawerContent={props => <DrawerContent {...props} />}>
      <Drawer.Screen name="Screens">
        {props => <Screens {...props} style={animatedStyle} />}
      </Drawer.Screen>
    </Drawer.Navigator>

（我混合使用抽屉和堆栈导航器以便能够同时使用两者，因此称为“屏幕”；这是我唯一的屏幕。）

我的堆栈屏幕：

     <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={Home}
          test="test"
          {...navigation}></Stack.Screen>

        <Stack.Screen
          name="Book"
          component={Book}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Login"
          component={LoginScreen}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Sign Up"
          component={SignUp}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="CheckIn"
          component={CheckIn}
          {...navigation}></Stack.Screen>
        <Stack.Screen
          name="Search"
          component={Search}
          {...navigation}></Stack.Screen>
      </Stack.Navigator>

（我没有添加任何样式。）

我该如何解决这个问题？谢谢

Answer 1

在您的登录屏幕中，您可以告诉导航为特定路线设置参数。另一种方法是使用 'navigate' 更改屏幕并传递参数。

const MyLoginScreen = () => {
  const navigation = useNavigation();

  return (
    <Button
      title="Navigate me"
      onPress={() => {
        navigation.dispatch({
         ...CommonActions.setParams({ email: state.email }),
         source: 'YourRouteKey',
        });
      }}
    />
  );
};

Answer 2

我刚刚这样做了：

await AsyncStorage.setItem('lenderEmail', this.state.email);
const lenderEmail = AsyncStorage.getItem('lenderEmail');

如果通过用户输入获取道具，如何通过抽屉导航传递道具？

How do you pass a prop through Drawer Navigation if the prop is obtained by user input?

jsx

navigation-drawer

reactjs

react-native

react-navigation