如何使用 React Native 中的异步存储更改 Route.Js 中的初始屏幕

Question

我正在尝试更改我在 Router.js 中的应用程序的入口点，以便不再向用户显示入职屏幕。基本上我设置了一个异步存储值。入职完成后，值 return 为真。由于异步存储函数是异步的，Router.js 中的 return 语句不会等待它 return 一个值。所以我不能改变我的导航系统的初始点。

index.js

AppRegistry.registerComponent(appName, () => Router);

Router.js

function Router() {

let first ="App"
let second ="GetStarted"



  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName={checkFirstUsage().then(data=>data?second:first)} screenOptions={{headerShown: false} }>
        <Stack.Screen name="GetStarted" component={GetStarted} />
        <Stack.Screen name="EnterPoem" component={EnterPoem} />
        <Stack.Screen name="Interest" component={Interested} />
        <Stack.Screen name="Begin" component={Begin} />
        <Stack.Screen name="App" component={App} />
      </Stack.Navigator>
    </NavigationContainer>
    
  );
}

checkFirstUsage

const checkFirstUsage = async () => {
    try {
      const value = await AsyncStorage.getItem('@isAsyncStorageSet')
      if(value === null) {
      
      return true
      }
      else{
        return false;
      }
    } catch(e) {
      console.log(e)
    }
  }

感谢任何帮助

Answer 1

我认为当您想管理分离的堆栈导航器时最好的方法是

index.js

import React, {useState, useEffect} from 'react';
import OnBoardingRoutes from './onBoarding.routes';
import AppRoutes from './app.routes';
import checkFirstUsage from "./checkFirstUsage/path";


const Routes: React.FC = () => {
  const [loading, setLoading] = useState(true)
  const [firstUsage,setFirstUsage] =useState(null);

  useEffect(() => {
     async function check() {
          const fU = await checkFirstUsage()
          setFirstUsage(fU)
          setLoading(false)
     }

     check()
  },[])

  if (loading) return null  // or any better component

  return firstUsage ? <OnBoardingRoutes /> : <AppRoutes />;
};

export default Routes;

然后你有两个堆栈导航器，以及它们各自的路线

onBoarding.routes

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';
import OnBoardingPage1 from '../pages/OnBoardingPage1';
import OnBoardingPage2 from '../pages/OnBoardingPage2';


const App = createStackNavigator();

const OnBoardingRoutes: React.FC = () => (
  <App.Navigator
    initialRouteName="GetStarted"
    screenOptions={{
      headerShown: false,
    }}
  >
    <App.Screen name="OnBoardingPage1" component={OnBoardingPage1} />
    <App.Screen name="OnBoardingPage2" component={OnBoardingPage2} />

  </App.Navigator>
);

export default OnBoardingRoutes;

和您的应用程序路由

app.routes

    import React from 'react';
    import { createStackNavigator } from '@react-navigation/stack';
    import AppPage1 from '../pages/AppPage1';
    import AppPage2 from '../pages/AppPage2';

    
    const App = createStackNavigator();
    
    const AppRoutes: React.FC = () => (
      <App.Navigator
        initialRouteName="App"
        screenOptions={{
          headerShown: false,
        }}
      >
        <App.Screen name="AppPage1" component={AppPage1} />
        <App.Screen name="AppPage2" component={AppPage2} />

      </App.Navigator>
    );
    
    export default AppRoutes;

你的路由器组件看起来像

import React from "react"
import Routes from "./index";


    function Router() {
    
      return (
        <NavigationContainer>
           <Routes/>
        </NavigationContainer>
        
      );
    }
export default Router;

如何使用 React Native 中的异步存储更改 Route.Js 中的初始屏幕

How to change initial screen in Route.Js with Async Storage in React Native

javascript

async-await

react-native

asyncstorage

index.js

onBoarding.routes

app.routes