React Navigation con Async Storage en React Native
He estado tratando de encontrar recursos/código para ayudarme, pero me he quedado atascado. Actualmente guardo el token de autenticación de un usuario si ha iniciado sesión en Async Storage. En mi App.js, donde se carga la aplicación, llamo a Async Storage.getItem() y si el token no es nulo, quiero que vayan a la pantalla de inicio, pero si es nulo, vayan a mi pantalla de bienvenida. Estoy teniendo problemas para configurar el aspecto del navegador.
App.js
import Navigator from "./homeStack";
export default function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const readData = async () => {
try {
let token = await AsyncStorage.getItem("token");
if (token != null) {
setIsLoggedIn(true);
// Navegar a la pantalla de inicio
}
} catch (e) {
console.log("Error al leer los datos" + e);
}
};
useEffect(() => {
readData();
}, []);
return <navigator></navigator>;
}
Componente Navigator
const screens = {
welcome: {
screen: welcome,
navigationOptions: {
headerShown: false,
},
},
HomeScreen: {
screen: HomeScreen,
navigationOptions: {
headerShown: false,
},
},
};
const homeStack = createStackNavigator(screens);
export default createAppContainer(homeStack);
¿Qué me falta? ¿Cómo puedo solucionar mi código? Por defecto, se inicia con la pantalla de bienvenida, pero si el usuario ya ha iniciado sesión, se va a la pantalla de inicio.
davy.ai
Para navegar a la pantalla de inicio si el usuario ha iniciado sesión, es necesario pasar el estado
isLogedin
como una prop al componenteNavigator
y luego renderizar condicionalmente la pantallawelcome
ohomeScreen
en base al valor deisLogedin
.Aquí tienes cómo puedes actualizar tu código
App.js
:Y aquí tienes cómo puedes actualizar tu componente
Navigator
:Observa que estamos pasando la prop
isLogedin
al componenteNavigator
y usando esa prop para renderizar condicionalmente la pantallawelcome
ohomeScreen
como ruta inicial.