Question

我的 createStackNavigator 屏幕中有一个 createBottomTabNavigator()。基本上我的 App.js 是这样的：

const RootStack = createStackNavigator(
  {
    Login: Login,
    Register: Register,
    Principal: {
      screen: Principal, 
      navigationOptions: {
        headerShown: false,
      },
    },
  },
  {
    initialRouteName: "Login"
  }
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

在我的“Principal.js”中，我正在创建一个 createBottomTabNavigator()

const Tab = createBottomTabNavigator();

class ConnectNavigator extends React.Component {

    (....)
        render() {
            return (
                <NavigationContainer>
                  <Tab.Navigator (....)>
                    <Tab.Screen name="Home" component={CheckPage} />
                    <Tab.Screen name="Settings" component={SettingPage} />
                  </Tab.Navigator>
                </NavigationContainer>
              );
            }
        }

基本上，在我的设置页面中，我想回到我的“登录”屏幕。但是因为我有两个 Navigator，所以我不能。我知道，我不是很清楚，但我的问题是：“当我在 Tab.Screen 中时，我可以进入我的登录屏幕吗？”

我已经尝试在“设置”屏幕中执行 this.props.navigation.navigate('Login')，但出现此错误

The action 'NAVIGATE' with payload {"name":"Login","params":{"screen":"Login"}} was not handled by any navigator.

Do you have a screen named 'Login'?

If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

Answer 1

我不确定您是否尝试过错误中提到的文档中所写的内容，但您可以尝试以下操作：

navigation.navigate('Home', { screen: 'Login' });

编辑：

你可以稍微重新构建一下：

const AppNavigation = () => <NavigationContainer>
     <Stack.Navigator initialRouteName={"Login"}>
        <Stack.Screen
          name={"Login"}
          options={{
            headerStyle: styles.loginHeader,
            headerShown: false,
          }}
          component={LaunchScreen}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name={"Principal"}
          component={BottomTabNavigation}
        />
</NavigationContainer>
    
    
    
    
const Tab = createBottomTabNavigator()
const BottomTabNavigation = () => {
  return (
    <Tab.Navigator
      initialRouteName={"Home"}
    >
    <Tab.Screen name="Home" component={CheckPage} />
     <Tab.Screen name="Settings" component={SettingPage} />
 
    </Tab.Navigator>
  )
}

React Navigation - 返回到另一个导航器中的屏幕

1 个答案: