react-native - 任何导航器均未处理有效载荷为 'NAVIGATE' {"name"} 的操作 :"Home"

Question

当前行为
出现错误

react 原生的私有(private)路由不适用于页面更改。带有有效负载 {"name":"Home"} 的操作 'NAVIGATE' 未由任何导航器处理。
你有一个名为“主页”的屏幕吗？

如果您试图导航到嵌套导航器中的屏幕，请参阅 https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator .

这是一个仅限开发的警告，不会在生产中显示。


预期行为
无法使用身份验证流进行导航。

如何重现
使用的代码来自:https://reactnavigation.org/docs/auth-flow

<NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerShown: false,
          }}>
           {isSignedIn === "true"? ( 
            <> 
            <Stack.Screen name="Home" component={Home} />
            <Stack.Screen name="Bookorder" component={Bookorder} />
             </> 
           ) : (
            <>
            <Stack.Screen name="Login" component={Login} />
            </>
          )}
        </Stack.Navigator>
  </NavigationContainer>

环境
系统:
操作系统:macOS 10.15.4
CPU:(4) x64 Intel(R) Core(TM) i5-5350U CPU @ 1.80GHz
内存:46.17 MB/8.00 GB
外壳:3.2.57 -/bin/bash
二进制文件:
节点:13.12.0 -/usr/local/bin/node
yarn :未找到
npm:6.14.4 -/usr/local/bin/npm
守望者:4.9.0 -/usr/local/bin/watchman

Answer 1

我得到一个临时解决方案:

import React, {Component} from 'react';
import {Provider} from 'react-redux';
import configureStore from './redux/store/Store';
import {View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {
  createStackNavigator,
  CardStyleInterpolators,
} from '@react-navigation/stack';
import HomeRoot from './appRoot/HomeRoot';
import AuthRoot from './appRoot/AuthRoot';
import LocalStorage from './common/LocalStorage';
import {Root} from 'native-base'; //for toast
const store = configureStore();

const RootStack = createStackNavigator();

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isLogin: false,
      isCheckLogin: false,
    };
  }

  setLoginState = async () => {
    let isLogin = await LocalStorage.read('isLogin');
    this.setState({isLogin: isLogin, isCheckLogin: true});
  };

  componentDidMount = async () => {
    await this.setLoginState();
  };

  render() {
    const {isLogin, isCheckLogin} = this.state;
    if (!isCheckLogin) {
      return <View />;
    }

    return (
      <Provider store={store}>
        <Root>
          <NavigationContainer>
            <RootStack.Navigator
              initialRouteName="Home"
              headerMode="none"
              screenOptions={{
                gestureEnabled: false,
                cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
              }}>
              {isLogin ? (
                <>
                  <RootStack.Screen
                    initialParams={{setLogin: this.setLoginState()}}
                    name="Home"
                    component={HomeRoot}
                  />
                </>
              ) : (
                <>
                  <RootStack.Screen
                    initialParams={{setLogin: this.setLoginState()}}
                    name="Login"
                    component={AuthRoot}
                  />
                </>
              )}
            </RootStack.Navigator>
          </NavigationContainer>
        </Root>
      </Provider>
    );
  }
}
export default App;