反应屏幕之间的本机导航

Question

我正在尝试使用 reactnavigation.org 库，但对此我有一些问题。我有两种类型的导航屏幕。两个屏幕是注册和授权。其他是常规的应用程序屏幕。问题是我无法渲染父组件 App.js 或其他功能以从子组件重新加载应用程序，从而更改我的屏幕块。屏幕之间的导航运行、历史记录、配置文件、OtherRunners 工作正常。屏幕 Main 和 Enter 之间的导航工作正常。但是如果我需要从 Run 导航到 Main，或者从 Enter 导航到 Run，就会出现问题。

App.js

const App = () => {
    const Stack = createStackNavigator()
    const Drawer = createDrawerNavigator()
    const [loggedIn, setLoggedIn] = useState(false)
    async function getUserEmail(){
        if(await AsyncStorage.getItem('@email')){
            setLoggedIn(true)
        }else{
            setLoggedIn(false)
        }
    }
    getUserEmail()
    function MenuDraw(){
        return(
            <Drawer.Navigator
                drawerContentOptions={}
                drawerType={}
                drawerStyle={{}}
            >
                <Drawer.Screen
                    name="Run"
                    component={Run}
                    options={}
                />
                <Drawer.Screen
                    name="History"
                    component={History}
                    options={}
                />
                <Drawer.Screen
                    name="Profile"
                    component={Profile}
                    options={}
                />
                <Drawer.Screen
                    name="OtherRunners"
                    component={OtherRunners}
                    options={}
                />
                <Drawer.Screen
                    name="LogOut"
                    component={Run}
                    initialParams={{action: 'logout'}}
                    options={}
                />
            </Drawer.Navigator>
        )
    }
    function MyDrawer(){
        if(loggedIn){
            return(
                <Stack.Navigator
                    screenOptions={{headerShown: false}}
                    initialRouteName={"MenuDraw"}
                >
                    <Stack.Screen name="MenuDraw" component={MenuDraw}/>
                    <Stack.Screen name="Details" component={Details}/>
                </Stack.Navigator>
            )
        }else{
            return (
                <Stack.Navigator
                    screenOptions={{headerShown: false}}
                    initialRouteName={"Main"}
                >
                    <Stack.Screen name="MenuDraw" component={MenuDraw} />
                    <Stack.Screen name="Details" component={Details} />

                    <Stack.Screen name="Main" component={Main} />
                    <Stack.Screen name="Enter" component={Enter} />
                </Stack.Navigator>
            )
        }
    }
  return(
      <NavigationContainer>
          <MyDrawer/>
      </NavigationContainer>
  )
}
export default App;

我尝试使用重新加载应用工具，但这些对我没有帮助。他们没有工作。在下面的这部分代码中。在运行屏幕上。

Run.js

const Run = ({navigation,route}) => {
    const clearStorage = async () => {
        await AsyncStorage.clear()
    }
    if(route.params){
        if(route.params.action === 'logout'){
            clearStorage()
            navigation.navigate("Main", {})
        }
    }
}
export default Run;

我正在尝试通过清理存储退出并导航到主屏幕。但它不适用于发布模式。这个我试过了，如下。

App.js

function MyDrawer(){
        if(loggedIn){
            return(
                <Stack.Navigator
                    screenOptions={{headerShown: false}}
                    initialRouteName={"MenuDraw"}
                >
                    <Stack.Screen name="MenuDraw" component={MenuDraw}/>
                    <Stack.Screen name="Details" component={Details}/>

++++                <Stack.Screen name="Main" component={Main} />
++++                <Stack.Screen name="Enter" component={Enter} />
                </Stack.Navigator>
            )
        }else{
            return (
                <Stack.Navigator
                    screenOptions={{headerShown: false}}
                    initialRouteName={"Main"}
                >
                    <Stack.Screen name="MenuDraw" component={MenuDraw} />
                    <Stack.Screen name="Details" component={Details} />

                    <Stack.Screen name="Main" component={Main} />
                    <Stack.Screen name="Enter" component={Enter} />
                </Stack.Navigator>
            )
        }
    }

无论哪种方式都无法正常工作。我该如何解决？我可以从子屏幕渲染 App.js 组件吗？或者我应该创建两个屏幕块线

<Stack.Screen name="MenuDraw" component={MenuDraw}/>
<Stack.Screen name="MenuRegister" component={MenuRegister}/>

并把我所有的屏幕按物品放在匹配部分？

我需要退出此部分： App.js

some code

               <Drawer.Screen
                    name="LogOut"
                    component={Run}
                    initialParams={{action: 'logout'}}
                    options={}
                />
            </Drawer.Navigator>

some code

Answer 1

您是否尝试过使用 useEffect 钩子来上路？ :-)

  useEffect(() => {
    const getUserEmail = async () => {
        if(await AsyncStorage.getItem('@email')){
            setLoggedIn(true)
        }else{
            setLoggedIn(false)
        }
    };
    getUserEmail();
  }, []);