React Native Navigation 5 嵌套

Question

我正在尝试在反应本机应用程序上使用嵌套导航。一方面我想要堆栈导航以使我的按钮工作。另一方面，我想包括底部导航选项卡。我成功地单独而不是一起实施。出现如下错误："the action navigate with payload {name:Login} was not handled by any navigator. If you are trying to navigate to a screen in nested navigator "see react navigation website”（见图）。我检查了它但没有运气

导航组件的代码如下

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

React Native Navigation 5 嵌套

React Native Navigation 5 Nested

reactjs

navigation

native

react-navigation-v5