如何在 React Native 中混合两种类型的导航

Question

我正在使用 React Native 开发一个应用程序。我想在我的应用程序上有一个底部导航 (5.x)。完成后，我还想让用户在其他用户的个人资料视图上导航。但是，我不希望这个新屏幕出现在底部导航中。我不知道该怎么做。我是否需要混合使用堆栈导航和底部导航？怎么做？

Answer 1

我添加了一个底部标签导航器，如下所示：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import DetailsScreen from '../Screens/DetailsScreen';
import HomeScreen from '../Screens/HomeScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import TestScreen from '../Screens/TestScreen';
import {StyleSheet} from 'react-native';

const Tab = createBottomTabNavigator();

export default class Navigation {
    render() {
        return (
            <NavigationContainer style={styles.navigationContainer}>
                <Tab.Navigator style={styles.tabNavigator}>
                    <Tab.Screen style={styles.tabScreen} name="Detail" component={DetailsScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Home" component={HomeScreen} />
                    <Tab.Screen style={styles.tabScreen} name="Test" component={TestScreen} hide={true} />
                </Tab.Navigator>
            </NavigationContainer>
        );
    }
}

const styles = StyleSheet.create({

});

这很好用！之后，我在我的主屏幕中添加了一个堆栈导航器（以便通过不在选项卡导航器中的屏幕进行导航）。

但是，它不能正常工作，因为它分割了我的屏幕。我的堆栈导航器如下所示：

import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from '../Screens/HomeScreen';
import DetailsScreen from '../Screens/DetailsScreen';
import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
const Stack = createStackNavigator();

export default function StackNavigation() {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name="Home" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

导入后，我将这两个文件添加到我的 App 文件中，就像使用标签和一样。

import ....

class App extends React.Component{

  render(){
    return (
        <View style={styles.container}>
          <Navigation />
          <StackNavigation />
        </View>
    );
  }
};

Answer 2

ReactNative 为此使用嵌套导航器。

您将为所需的每种导航类型创建 2 个单独的组件，然后将辅助导航器作为屏幕传递到主导航器，组件属性值是要传递的导航器。

正在传递的导航器不应被 NavigationContainer 包围，因为那样会引发错误，指出容器已提供或类似内容。

如您所说，在 App.js 中将其中两个作为单独的组件传递会创建分屏。 @Thomsath

有关详细信息，请参阅此 link：https://reactnavigation.org/docs/nesting-navigators/

这张图片也取自上面的 link。

Answer 3

正如 react-navigation 文档所说，嵌套导航不是一个好的用法，但你可以在 react-navigation 的 5.x 版本中做到这一点，正如其他人的回答所说。但是，如果你愿意，你可以使用 react-navigation 4.x 来做得更好，比如将 stack-navigatior 与 bottom-navigator 混合使用，如下图所示。按照代码去做：

yarn add react-navigation

如果您运行正在创建一个裸反应本机项目，运行下面的代码

yarn add react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

如果您正在运行一个展览项目，运行这个：

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

然后，要完成依赖项安装，运行:

yarn add react-navigation-tabs

您可以继续阅读版本 4.x 的文档以完成其他一些细节。下图显示了嵌套导航器的结构。

给个更好的解释，这段代码会先打开route(screen) name SignIn，如果prop SignedIn为true，那么Dashboard route会打开。当然最好使用最新的稳定版本，因为它是 5.x，并遵循文档的提示和建议。希望这有帮助。

如何在 React Native 中混合两种类型的导航

How to mix two types of navigation in react native

navigation

menu

react-native