React native 如何将登录的用户传递给React中的authContext_React Native_React Context

React native 如何将登录的用户传递给React中的authContext

react-native

React native 如何将登录的用户传递给React中的authContext,react-native,react-context,React Native,React Context,我在React中创建了以下身份验证组件，它使用AuthContext将登录功能传递给其他组件： const AuthContext = React.createContext(); <AuthContext.Provider value={authContext}> <NavigationContainer> <RootStack.Navigator mode="modal" headerMode="none&quo

我在React中创建了以下身份验证组件，它使用AuthContext将登录功能传递给其他组件：

const AuthContext = React.createContext();

<AuthContext.Provider value={authContext}>
   <NavigationContainer>
      <RootStack.Navigator mode="modal" headerMode="none">
         <RootStack.Screen name="Login" component={LoginScreen} />
      </RootStack.Navigator>
   </NavigationContainer>
</AuthContext.Provider>

因此，在我的登录页面上，我可以调用signIn函数：

function LoginScreen() {

    const { signIn } = React.useContext(AuthContext);

    // Input form comes here ...
    <TouchableOpacity style={styles.loginButton} onPress={() => signIn(data.username, password)}><Text style={styles.buttonText}>Login</Text></TouchableOpacity>
}

在这之前，我让一切都正常工作，但现在我想知道如何将令牌（它包含一些变量，如username，…）传递给我的其他组件？我想我想在authContext中传递令牌，但我不知道如何实现这一点？我想添加一个欢迎屏幕，看起来像：

函数WelcomeScreen（{navigation}）{

const{token}=React.useContext（AuthContext）；
返回(
欢迎{token.username}
);

}

我猜authContext需要另一个状态属性，比如e

const[token，setToken]=…

，这样我就可以调用

signIn（）

方法中的

setToken（）

方法，但是

React.usemo（（）=>({…

有点困惑，我不知道如何添加令牌作为附加信息。任何帮助都将不胜感激。提前感谢

function LoginScreen() {

    const { signIn } = React.useContext(AuthContext);

    // Input form comes here ...
    <TouchableOpacity style={styles.loginButton} onPress={() => signIn(data.username, password)}><Text style={styles.buttonText}>Login</Text></TouchableOpacity>
}

await AsyncStorage.setItem('userToken', JSON.stringify(token));

   const { token } = React.useContext(AuthContext);

   return (

       <View>
           <Text>Welcome {token.username}</Text>
       </View>

   );