React本机导航5嵌套

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