es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

React Navigation con Async Storage en React Native

20 Jul, 2023 Programación

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.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    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 componente Navigator y luego renderizar condicionalmente la pantalla welcome o homeScreen en base al valor de isLogedin.

    Aquí tienes cómo puedes actualizar tu código App.js:

    import Navigator from "./homeStack";

export default function App() {
  const [isLogedin, setIsLogedin] = useState(false);

  const readData = async () => {
    try {
      let token = await AsyncStorage.getItem("token");
      if (token != null) {
        setIsLogedin(true);
      }
    } catch (e) {
      console.log("error al leer los datos" + e);
    }
  };

  useEffect(() => {
    readData();
  }, []);

  return <navigator islogedin="{isLogedin}"></navigator>;
}

    Y aquí tienes cómo puedes actualizar tu componente Navigator:

    const screens = {
  welcome: {
    screen: welcome,
    navigationOptions: {
      headerShown: false,
    },
  },

  HomeScreen: {
    screen: homeScreen,
    navigationOptions: {
      headerShown: false,
    },
  },
};

const homeStack = createStackNavigator(screens);

const Navigator = createAppContainer(homeStack);

export default function NavigationContainer({ isLogedin }) {
  return <navigator initialroutename="{isLogedin" "homescreen"="" :="" "welcome"}=""></navigator>;
}

    Observa que estamos pasando la prop isLogedin al componente Navigator y usando esa prop para renderizar condicionalmente la pantalla welcome o homeScreen como ruta inicial.

Comments are closed.