React native 如何将userToken从登录传递到应用程序组件

您好，我正在尝试创建一个登录屏幕，但不明白如何更新登录组件中的userToken状态，然后将其传递给应用程序组件，让我访问singin屏幕

const Login = ({navigation}) => {
  const [userToken,setUserToken] = useState('')
  const [email,setEmail] = useState('');
  const [password,setPassword] = useState('');
  const onEndGetDatos = (payload) => {
    setUserToken(payload.data.id)
  };

  const sendDataL = () => {
    Axios.post('http://3.90.64.114/api/v1/web/login',{
        email,
        password
    }
    ).then(response => {
        onEndGetDatos(response);
    }).catch(err => {
        alert(err);
    })
  }
  return (
    <SafeAreaView>
        <ScrollView>
          <TextInput placeholder="Usuario(email)"
            onChangeText={email => setEmail(email)}
            keyboardType = 'email-address'
          />
          <TextInput placeholder="Contraseña" 
            secureTextEntry={true} 
            onChangeText={password => setPassword(password)}/>
          <Button title="Entrar" onPress={sendDataL}/>
          <Button title="Olvide mi Contraseña" onPress={() => navigation.navigate('Restablecer')}/>
          <Button title="Soy Nuevo" onPress={() => navigation.navigate('Registrar')}/>
        </ScrollView>
      </SafeAreaView>
  )
}

const Login=（{navigation}）=>{
const[userToken，setUserToken]=useState（“”）
const[email，setEmail]=useState（“”）；
const[password，setPassword]=useState（“”）；
const onedgetdatos=（有效负载）=>{
setUserToken（payload.data.id）
};
const sendDataL=（）=>{
轴心柱http://3.90.64.114/api/v1/web/login',{
电子邮件，
密码
}
)。然后（响应=>{
onEndGetDatos（响应）；
}).catch（错误=>{
警惕（err）；
})
}
返回(
设置电子邮件（电子邮件）}
键盘类型='电子邮件地址'
/>
设置密码（密码）}/>
navigation.navigate（'Restablecer'）}/>
导航。导航（'registrator'）}/>
)
}

如何将userToken传递给我的应用程序组件

const App = ({userToken}) => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        {userToken == null ? (
          <>
            <Stack.Screen name="Login" component={Login} />
            <Stack.Screen name="Restablecer" component={RestablecerPasswd} />
            <Stack.Screen name="Registrar" component={RegistrarNewUsr} />
          </>
        ) : (
          <>
            <Stack.Screen name="Perfil" component={Perfil} />
            <Stack.Screen name="Configuraciones" component={CambiarPsswd} />
            <Stack.Screen name="Dietas" component={Dietas} />
            <Stack.Screen name="Datos" component={Data} />
          </>
        )}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

const-App=（{userToken}）=>{
返回(
{userToken==null(
) : (
)}
);
};

通过这种方式，您需要在所有屏幕上手动传递令牌。为了方便起见，您可以使用存储/检索访问令牌。访问令牌的方法是，您可以创建

上下文

并将应用程序的根组件包装到

提供者

。上下文将公开令牌，您可以从任何地方访问它。通过使用上下文，您不需要从共享首选项中检索令牌，您可以在应用程序初始化时在

上下文中检索和存储令牌，该应用程序初始化将在整个应用程序流中均可访问。
您还可以使用异步存储来存储令牌，以后您可以在任何地方使用它。使用异步存储，您可以通过为令牌定义的密钥设置或获取值

设定值：

AsyncStorage.setItem('key', 'value');

获取值：

await AsyncStorage.getItem('key');

有关更多可用方法：