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,
    },
});

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

有效载荷为 {"name":"HomeNavigator","params":{"screen":"Home"}} 的操作 'NAVIGATE' 未被任何导航器处理。

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

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

Answer 1

替换这一行

 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} />

你用名字而不是组件来称呼它。

但我会建议您查看此example，因为这是登录前后切换的最佳方式。

希望对你有帮助！！！

Answer 2

是的，我认为您了解嵌套导航器，但是有点错误是调用 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/