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

【问题标题】：How to mix two types of navigation in react native如何在 React Native 中混合两种类型的导航
【发布时间】：2020-02-15 16:34:17
【问题描述】：

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

【问题讨论】：

你试过什么？你能添加代码吗
我已经添加了两种导航（你可以看我对我帖子的回答）

标签： react-native menu navigation

【解决方案1】：

ReactNative 为此使用嵌套导航器。

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

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

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

查看此链接了解更多详情：https://reactnavigation.org/docs/nesting-navigators/

这张图片也是取自上面的链接。

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

yarn add react-navigation

如果您正在运行一个裸 react-native 项目，请在下面运行此代码

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

如果你正在运行一个 expo 项目，运行这个：

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 版的文档以完成其他一些细节。下图显示了嵌套导航器的结构。

给出一个更好的解释，这段代码将首先打开路由（屏幕）名称SignIn，如果道具SignedIn为true，则将打开Dashboard路由。当然最好使用最新的稳定版本，因为它是 5.x，并遵循文档的提示和建议。希望这会有所帮助。

【讨论】：