仍然尝试在此处了解多个导航器。
基本上,我有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”的屏幕?
我可以知道如何解决这个问题吗?谢谢
是的,我认为您了解嵌套导航器,但乱码是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/