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

是的，我认为您了解嵌套导航器，但乱码是HomeNavigator的名称错误我认为必须是

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

因为“应用”是您在容器中分配的屏幕名称

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

您用名称而不是组成部分来称呼它。

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

希望有帮助！

React Navigation 5，将屏幕移动到其他导航器

2 个答案: