Expo React中的阅读用户

Question

好吧，这个很难。

我需要读取用户的令牌，因此根据哪个用户登录应用程序，显示的第一个页面会发生变化。我不知道如何开始。

我有一个欢迎页面，你可以在那里选择你的角色，我想你会在那里拿到代币并阅读它，真的不知道：

import React from 'react'
import { View, StyleSheet, TouchableOpacity, Image } from "react-native";
import { Layout, SimpleHeader, Text } from '../../elements/index';
import { useNavigation } from '@react-navigation/native';
import { Card } from 'components/elements';

const WelcomeComponent = (props) => {
const navigation = useNavigation();
return (
<Layout style={styles.wrapper}>

<View style={styles.header}>
<Image source={require("../../elements/assets/LogoIcon.png")} style={styles.logo} />
<SimpleHeader
title="Bienvenido a Telelavo" />

</View>
<View style={ styles.main}>
<Text style={styles.rol}>
Selecciona tu rol
</Text>
<Card style={styles.card}>
<TouchableOpacity onPress={() => navigation.navigate("Login" )}>
<View style={styles.navigator}>
<View style={styles.Franquiciado}>
<Image source={require("../../elements/assets/Franquiciado.png")} style={styles.image}></Image>
</View>
<View style={ styles.relleno}>
<Text style={styles.subtitle}>Franquiciado</Text>
<Text style={styles.texto}>Inicia sesión como Franquiciado</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card style={styles.card}>
<TouchableOpacity onPress={() => navigation.navigate("Login")}>
<View style={styles.navigator}>
<View style={styles.Employee}>
<Image source={require("../../elements/assets/Employee.png")} style={styles.image}></Image>
</View>
<View style={ styles.relleno}>
<Text style={styles.subtitle}>Empleado</Text>
<Text style={styles.texto}>Inicia sesión como Empleado</Text>
</View>
</View>
</TouchableOpacity>
</Card>
<Card style={styles.card}>
<TouchableOpacity onPress={() => navigation.navigate( "Login", {client:true} )}> 
<View style={styles.navigator}>
<View style={styles.User}>
<Image source={require("../../elements/assets/Users.png")} style={styles.image}></Image>
</View>
<View style={ styles.relleno}>
<Text style={styles.subtitle}>Cliente</Text>
<Text style={styles.texto}>Inicia sesión como Cliente</Text>
</View>
</View>
</TouchableOpacity>
</Card>
</View>
</Layout>
)
}
const styles = StyleSheet.create({
wrapper: {
flex: 1,
backgroundColor: '#fff',
},
main: {
margin: 5,
display: "flex",
bottom: 15,
},
header: {
display: "flex",
alignItems: "flex-start",
flexDirection: "column",
justifyContent: "flex-start",
marginVertical: 10,
top: 20,
fontSize: 30,

},
logo: {
alignSelf: "center",
},
card: {
display: "flex",
margin: 10,
marginHorizontal: 10,

},
navigator:{
display: "flex",
alignItems: "center",
wrapper: "wrap",
flexDirection: "row",
alignitems:"center",
margin: 10
},
Franquiciado: {
backgroundColor: "black",
height: 40,
width: 40,
display: "flex",
},
Employee: {
backgroundColor: "#F2F2F2",
height: 40,
width: 40,
display: "flex",
},
User: {
backgroundColor: "#F5BF0D",
height: 40,
width: 40,
display: "flex",
},
image: {
height: 30,
width: 30,
display: "flex",
alignSelf: "center",
top: 5,
},
rol: {
fontSize: 16,
marginTop:10,
left: 10,
},
subtitle:{
fontWeight: "bold",
},
relleno:{
left: 20,
},
})
export default WelcomeComponent;

然后它进入登录，这其实并不重要，问题是我希望根据userToken向用户显示不同的页面。。。

从哪里开始，进入导航？在WelcomeComponent发送的道具中，我会选择登录吗？我该把代币拿到哪里去读？

我很失落，我想读一些关于它的想法，或者至少是教程，尽管我还没有找到任何关于我的规范，(登录重定向expo-react native，或者一些简短的(

谢谢你的帮助。

Answer 1

用户选择角色后，您可以决定导航到哪个屏幕或将哪些道具传递到该屏幕。

如果你需要在登录后这样做，那么你可以从登录功能中读取响应，并根据它来决定在哪里引导你的用户，这两种方法都是你建议的，如果你有一个完全不同的UI，那么我建议你使用导航和完全不同的屏幕，但是，如果差异很小，您可以在导航参数中传递角色，并在屏幕内读取它们，以决定显示什么。

如果你想把你的用户信息保存在其他组件可以轻松访问的地方，你可以使用React上下文或许多状态管理库之一(redux工具包、zustand等(