React Native Navigation 5 Nested

Question

我正在尝试在react本机应用程序嵌套导航上使用。一方面，我想要堆栈导航，以便使工作成为我的按钮。另一方面，我想包括底部导航选项卡。我成功地单独实现了这两个，但没有一起实现。出现如下错误："任何导航器都没有处理带有有效负载｛name:Login｝的操作导航。如果你试图导航到嵌套导航器中的屏幕，请参阅react导航网站"(见图(。我检查了它，但没有运气

导航部件的代码如下

const Stack = createStackNavigator();
const MaterialBottomTopTabs = createBottomTabNavigator();
class Navigation extends Component {
createHomeStack = () => {
return (
<Stack.Navigator
screenOptions={{
headerShown: false,
}}
initialRouteName="RegisterLogin">
<Stack.Screen name="s" component={RegisterLogin} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Articles" component={Articles} />
</Stack.Navigator>
);
};
render() {
return (
<NavigationContainer>
<MaterialBottomTopTabs.Navigator>
<MaterialBottomTopTabs.Screen name="tab3" component={RegisterLogin} />
<MaterialBottomTopTabs.Screen name="tab1" component={Articles} />
<MaterialBottomTopTabs.Screen name="tab2" component={Sleep} />
</MaterialBottomTopTabs.Navigator>
</NavigationContainer>
);
}
}

并且为了从按钮访问是

<TouchableOpacity
style={styles.registerButton}
title="Register button"
onPress={() => this.props.navigation.navigate('Register')}>
<Text style={styles.registerText}>Register</Text>
</TouchableOpacity>

谢谢

Answer 1

必须将堆栈导航器嵌套到底部导航器中，才能实现所需的功能。

我在这里给你举了一个完整的例子：

import React from 'react'
import { Button, Text, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'
import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs'
const Tab = createMaterialBottomTabNavigator()
const Stack = createStackNavigator()
const RegisterLogin = ({ navigation }) => (
<View style={styles.view}>
<Text>Register Login Screen</Text>
<Button
title="Go to Register"
onPress={() => navigation.navigate('Register')}
/>
<Button
title="Go to Login"
onPress={() => navigation.navigate('Login')}
/>
<Button
title="Go to Articles"
onPress={() => navigation.navigate('Articles')}
/>
<Button
title="Go to tab1 Articles"
onPress={() => navigation.navigate('tab1')}
/>
</View>
)
const Login = () => <View style={styles.view}><Text>Login Screen</Text></View>
const Register = () => <View style={styles.view}><Text>Register Screen</Text></View>
const Articles = () => <View style={styles.view}><Text>Articles Screen</Text></View>
const Sleep = () => <View style={styles.view}><Text>Sleep Screen</Text></View>
const homeOptions = {
screenOptions: {
headerShown: false,
},
initialRouteName: "RegisterLogin"
}
const HomeStack = () => (
<Stack.Navigator {...homeOptions}>
<Stack.Screen name="RegisterLogin" component={RegisterLogin} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Articles" component={Articles} />
</Stack.Navigator>
)
const Footer = () => (
<Tab.Navigator>
<Tab.Screen name="tab3" component={HomeStack} />
<Tab.Screen name="tab1" component={Articles} />
<Tab.Screen name="tab2" component={Sleep} />
</Tab.Navigator>
)
export default props => (
<NavigationContainer>
<Footer />
</NavigationContainer>
)
const styles = StyleSheet.create({
view: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
}
})

Answer 2

感谢您的回答，我自己也提出了一个解决方案，我会附上代码，希望有需要的人会使用它。

const Stack = createStackNavigator();
const Tabs = createBottomTabNavigator();
const TabsScreen = () => (
<Tabs.Navigator>
<Tabs.Screen name="Articles" component={Articles} />
<Tabs.Screen name="Sleep" component={Sleep} />
</Tabs.Navigator>
);
export default CreateStack = () => (
<NavigationContainer>
<Stack.Navigator
screenOptions={{headerShown: false}}
initialRouteName={RegisterLogin}>
<Stack.Screen name="RegisterLogin" component={RegisterLogin} />
<Stack.Screen name="Login" component={Login} />
<Stack.Screen name="Register" component={Register} />
<Stack.Screen name="Articles" component={TabsScreen} />
</Stack.Navigator>
</NavigationContainer>
);