Javascript 当使用react navigation 5而不使用redux时，如何从另一个上下文中获得结果？

软件包版本：

    "react": "16.13.1",
    "react-native": "0.63.2",
    "@react-navigation/bottom-tabs": "^5.7.3",
    "@react-navigation/material-bottom-tabs": "^5.2.15",
    "@react-navigation/material-top-tabs": "^5.2.15",
    "@react-navigation/native": "^5.7.3",
    "@react-navigation/stack": "^5.9.0",

我使用的是react navigation 5，它没有任何开关导航器。下面是我的屏幕流程：-

naviContainer.js
    ├── SplashScreen.js
    ├── LoginScreen.js
    └── BottomTabScreen.js

SplashScreen.jsflow

读取

AsyncStorage

以获取令牌（如果可用）

检查与web域的连接

从RESTAPI获取配置值

如果#1解析，使用REST Api验证令牌以接收用户信息令牌和解析承诺。否则，拒绝

---

您正在尝试使用上下文创建交换机导航器。 可能有多种选择，但我会这样做

首先，将启动屏幕视为一个组件而不是屏幕，然后您可以简单地执行异步调用检查并从中更新上下文，然后您可以使用RN5有条件地呈现堆栈

在这里，我们有一个上下文和启动屏幕更新上下文，您将不需要redux或任何东西在这里。我们根据上下文显示启动屏幕或导航。 如果您真的想使用splashscreen的屏幕，您可以修改为在上下文中使用类似于枚举的内容，并使用多个条件基于此显示屏幕。（如1->Splash，2->Home 3->登录）

import*as React from'React'；
从“react native”导入{按钮、视图、文本}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
const AppContext=React.createContext（）；
功能主屏幕（{navigation}）{
返回(
主屏幕
navigation.navigate（'Details'）}
/>
);
}
函数DetailsScreen（{navigation}）{
返回(
详细信息屏幕
navigation.push（'Details'）}
/>
);
}
函数SplashScreen（）{
const{setAppState}=React.useContext（AppContext）；
React.useffect（（）=>{
//检查异步存储
setAppState（{isLoggedIn:true}）；
}, []);
返回(
欢迎屏幕
);
}
const Stack=createStackNavigator（）；
函数App（）{
const[appState，setAppState]=React.useState（{}）；
const state={appState，setAppState}；
返回(
如果与
主屏幕一起
有一个带有
ProfileScreen
的底部选项卡，该选项卡具有按钮注销功能，它的组件位于另一个文件中，它可以像AppContext一样使用吗？或者所有内容都必须像零食一样放入App.js中？是的，您可以将上下文放在单独的文件中并导出，然后在使用useC注销时使用它我喜欢这句话，因为它很容易回答。好主意。我已经做到了，而且它可以被任何导入的文件使用。是的，这是使用上下文最好的部分：）
export const SplashScreen = ({ navigation }) => {
async function LoadInitialComponent() {}
useEffect(() => {
    setProgressText('Initializing component...');
    AppGlobal.constRESTful = serverDomain + 'api/store';
    if (isRendered) {
        LoadInitialComponent()
            .then(response => {
                /// Token available and splash is done. Go to BottomTabScreen
            })
            .catch(error => {
                console.log(error);
                /// Token unavailable and splash is done. Go to LoginScreen
            });
    }
    return () => {
        isRendered = false;
    }
}, []);
return (
<View/>
)
}

const StackApp = createStackNavigator();
export const StackNavigator = () => {
  const [IsLoggedIn, setIsLoggedIn] = React.useState(false);
  const [IsLoading, setIsLoading] = React.useState(true);

  React.useEffect(() => {
    setTimeout(() => {
      setIsLoading(!IsLoading);
      setIsLoggedIn(false);
    }, 1500);
  }, []);

  return (
    <NavigationContainer>
      {IsLoading === true
        ? (
          <SplashScreen />
        )
        : IsLoggedIn === true
          ? (
            <StackApp.Screen name='Dashboard' component={NavigatorDashboard} />
          )
          : (
            <StackApp.Screen name='Login' component={NavigatorLogin} options={{ headerShown: false }} />
          )
      }
    </NavigationContainer>
  )
}

isSignedIn ? (
  <>
    <Stack.Screen name="Home" component={HomeScreen} />
    <Stack.Screen name="Profile" component={ProfileScreen} />
    <Stack.Screen name="Settings" component={SettingsScreen} />
  </>
) : (
  <>
    <Stack.Screen name="SignIn" component={SignInScreen} />
    <Stack.Screen name="SignUp" component={SignUpScreen} />
  </>
)

import * as React from 'react';
import { Button, View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const AppContext = React.createContext();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
      <Button
        title="Go to Details... again"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

function SplashScreen() {
  const { setAppState } = React.useContext(AppContext);
  React.useEffect(() => {
    //Check async storage
    setAppState({ isLoggedIn: true });
  }, []);
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Welcome Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  const [appState, setAppState] = React.useState({});
  const state = { appState, setAppState };

  return (
    <AppContext.Provider value={state}>
      {appState.isLoggedIn ? (
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen name="Details" component={DetailsScreen} />
          </Stack.Navigator>
        </NavigationContainer>
      ) : (
        <SplashScreen />
      )}
    </AppContext.Provider>
  );
}

export default App;