React Navigation 5，将屏幕移动到不同的导航器

Question

这里仍然尝试了解多导航器。

基本上我有2个导航器，一个用于登录页面的rootnavigator，以及用于登录后任何屏幕的appnavigator，下面是app.js

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

import LoginScreen from './src/pages/auth/Login';
import HomeScreen from './src/pages/auth/Home';
import MemoryScreen from './src/pages/games/Memory';

const AppStack = createStackNavigator();
const RootStack = createStackNavigator();

function HomeNavigator() {
  return (
    <AppStack.Navigator mode="modal" initialRouteName="Login" screenOptions={({ route, navigation }) => ({
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerRight: () => (
        <Button
          onPress={() => navigation.navigate('Login')}
          title="Logout"
          color="#fff"
        />
      ),
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    })}>
      <AppStack.Screen
        name="Home"
        component={HomeScreen}
        options={{
          title: 'Simple Scorecard',
        }}
      />
      <AppStack.Screen
        name="Memory"
        component={MemoryScreen}
        options={{
          title: 'Memory Games',
        }} />
    </AppStack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Login">
        <RootStack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            title: 'Simple Scorecard',
          }} />
        <RootStack.Screen name="App" component={HomeNavigator} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

我尝试从登录页面转到主屏幕，如下所示。 (Login.js)

import React, { Component } from 'react';
import { Button, TextInput, View, StyleSheet } from 'react-native';

export default class Login extends Component {
    constructor(props) {
        super(props);
        this.state = {
            username: '',
            password: '',
        };
    }

    onLogin({ navigation }) {
        const { username, password } = this.state;
        // navigation.navigate('HomeNavigator', {
        //     screen: 'Home',
        //   })
        this.props.navigation.navigate('HomeNavigator', {
            screen: 'Home',
          })
    }

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    value={this.state.username}
                    onChangeText={(username) => this.setState({ username })}
                    placeholder={'Username'}
                    style={styles.input}
                />
                <TextInput
                    value={this.state.password}
                    onChangeText={(password) => this.setState({ password })}
                    placeholder={'Password'}
                    secureTextEntry={true}
                    style={styles.input}
                />

                <Button
                    title={'Login'}
                    style={styles.input}
                    onPress={this.onLogin.bind(this)}
                />
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
        backgroundColor: '#ecf0f1',
    },
    input: {
        width: 200,
        height: 44,
        padding: 10,
        borderWidth: 1,
        borderColor: 'black',
        marginBottom: 10,
    },
});

问题是，我无法导航到主页，错误通知如下：

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

你有一个名为 'HomeNavigator' 的屏幕吗？

我可以知道如何解决这个问题吗？谢谢

Answer 1

是的，我认为您了解嵌套导航器，但是一个小错误是调用了错误的 HomeNavigator 名称我觉得对的一定是

       this.props.navigation.navigate('App', {
            screen: 'Home',
          })

因为"App"是您在容器中分配的屏幕名称

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator initialRouteName="Login">
        <RootStack.Screen
          name="Login"
          component={LoginScreen}
          options={{
            title: 'Simple Scorecard',
          }} />
        <RootStack.Screen name="App" component={HomeNavigator} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

在这里了解更多https://reactnavigation.org/docs/nesting-navigators/

Answer 2

替换此行

 onLogin({ navigation }) {
    const { username, password } = this.state;
    // navigation.navigate('HomeNavigator', {
    //     screen: 'Home',
    //   })
    this.props.navigation.navigate('HomeNavigator', {
        screen: 'Home',
      })
}

来自

 onLogin({ navigation }) {
    const { username, password } = this.state;
    // navigation.navigate('HomeNavigator', {
    //     screen: 'Home',
    //   })
    this.props.navigation.navigate('App', {
        screen: 'Home',
      })
}

或者你可以反之亦然：- 变化

 <RootStack.Screen name="App" component={HomeNavigator} />

至此

 <RootStack.Screen name="HomeNavigator" component={HomeNavigator} />

您按名称而不是组件来调用它。

但我会推荐你看看这个，因为这是登录前后切换的最佳方式。

希望对您有所帮助！！！

React Navigation 5，将屏幕移动到不同的导航器

React Navigation 5 , Moving screen to different navigator

javascript

react-native

react-navigation

expo

react-navigation-v5