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

我试图在Router.js中更改我的应用程序的入口点，以避免第二次显示用户登录屏幕。基本上我设置了一个异步存储值。当入职完成时，该值返回true。由于异步存储函数是异步的，Router.js中的return语句不会等待它返回值。所以我不能改变我的导航系统的初始点

index.js

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

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>
    
  );
}

Router.js

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

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>
    
  );
}

---

非常感谢您的帮助

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

index.js

import React，{useState，useffect}来自“React”；
从“./onBoarding.routes”导入OnBoardingRoutes；
从“/app.routes”导入批准；
从“/checkFirstUsage/path”导入checkFirstUsage；
常量路由：React.FC=（）=>{
常量[loading，setLoading]=useState（true）
const[firstUsage，setFirstUsage]=useState（null）；
useffect（（）=>{
异步函数检查（）{
const fU=等待checkFirstUsage（）
setFirstUsage（fU）
设置加载（错误）
}
检查（）
},[])
if（加载）返回null//或任何更好的组件
返回第一次使用？：；
};
导出默认路径；

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

登机路线

从“React”导入React；
从'@react navigation/stack'导入{createStackNavigator}；
从“../pages/OnBoardingPage1”导入OnBoardingPage1；
从“../pages/OnBoardingPage2”导入OnBoardingPage2；
const App=createStackNavigator（）；
const OnBoardingRoutes:React.FC=（）=>(
);
导出默认登机路线；

和你的应用程序路线

app.routes

从“React”导入React；
从'@react navigation/stack'导入{createStackNavigator}；
从“../pages/AppPage1”导入AppPage1；
从“../pages/AppPage2”导入AppPage2；
const App=createStackNavigator（）；
常量批准：React.FC=（）=>(
);
导出默认批准；

您的路由器组件将如下所示

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


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

从“React”导入React
从“/index”导入路由；
函数路由器（）{
返回(
);
}
导出默认路由器；

非常感谢您的回答。有了你的回答，问题就完全消失了：）很乐意帮忙！我的第一个正确答案是：）祝贺你：）。从现在起，我将关注你的其他答案。

    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;