让我们用React Navigation导航
我们都知道，实施导航很重要，有时会给移动应用程序的开发带来痛苦。
因为它直接或剧烈地影响着用户体验和应用程序性能的好坏。 您需要从多个有趣的导航解决方案中进行选择，并以明智的方式使用它来获得所需的结果。
在React Native世界中，大多数事情仍然充满活力和不成熟。 React社区非常强大且富有成效。 但是，这给所有积极的事情带来了痛苦。 例如，在几次版本更新后，可能会弃用您喜欢的库或所选功能。
以我自己的经验，我开始使用react native的导航器api，然后决定切换到Navigation Experiment以在性能和前向兼容性方面获得更好的结果，它看起来很有希望，当时的嗡嗡声是非常积极的，但是最近突然不推荐使用。 所有这些事情几乎都发生在一年之内。
首先，什么是React Navigation？ 在React Native官方文档中，它被描述为：
React Navigation提供了一种易于使用的导航解决方案，能够在iOS和Android上呈现常见的堆栈导航和选项卡式导航模式。 由于这是JavaScript实现，因此与状态管理库（例如redux）集成时，它提供了最大的可配置性和灵活性。
是的，它与IOS和Android都兼容，非常灵活，您可以将其与redux，flux或mobx集成。
在开始之前，让我们检查示例导航应用程序的最终版本。
为了简化和提高生产力，我们将在Expo的帮助下对该示例应用进行编码（我不会进入主题，您可以从链接中进行检查），因此您也可以在Expo Client中查看工作示例。 好吧，让我们现在滚动。
如果您想签出并玩代码；
这是
github repo链接和expo链接用于示例应用程序。
开始吧 ！
用expo创建一个新的空白项目，不要让expo为导航布局一些代码，而是选择空白项目。
现在，我们可以将反应导航添加到我们的项目中。
npm install --save react-navigation 或者如果您安装了纱线；
yarn add react-navigation
与三种类型的导航器捆绑在一起的React导航； StackNavigator，TabNavigator和DrawerNavigator。 我不想为您提供有关导航器类型的更多详细信息，您可以从文档中进行检查。 我们将在我们的应用程序中使用这三个。
现在，让我们创建一个文件，并像这样在其中添加StackNavigator 。
导入{
StackNavigator，
DrawerNavigator，
TabNavigator}
来自“反应导航”；
从'./FirstScreen'导入FirstScreen；
从“ ./SecondScreen”导入SecondScreen；
从'react'导入React；
const Navigation = StackNavigator（{
第一：{
屏幕：FirstScreen，
}，
第二：{
屏幕：SecondScreen，
}，
}）;
导出默认导航；
这是我们的Navigator.js文件。 非常简短，简单，这本身就使整个魔术成为可能。 我们可以像这样在App.js中添加Navigation组件；
render（）{
返回（
）;
}
我们至少需要两个或更多组件才能从一个导航到另一个。 因此，让我们分别创建FirsrScreen.js和SecondScreen.js 。
const FirstScreen =（属性）=>（
props.navigation.navigate（'Second'）}
style = {styles.text}>“第一屏”
）
const styles = StyleSheet.create（{
....
}）
导出默认的FirstScreen;
第二个看起来完全一样。 您需要特别注意一行代码，即；
props.navigation.navigate（'Second'）
仅仅因为我们将FirstScreen和SecondScreen组件与导航组件包装FirstScreen ，我们才能轻松获得导航道具 这些组件中的导航功能。 正如您从代码中可以理解的那样，当用户单击“第一屏幕”文本，触发导航功能并且用户进入“第二屏幕”时，就这么简单。 所有导航标题和后退按钮均由react-navigation控制。 这就是我们得到的结果。
混合导航器
好的，让它有点复杂，然后添加“标签导航”。 我们可以再次使用Navigator.js文件。
const TabNavigation = TabNavigator（{
第一：{
屏幕：FirstScreen，
}，
第二：{
屏幕：SecondScreen，
}，
}）;
const Navigation = StackNavigator（{
标签： {
屏幕：TabNavigation，
}，
}）;
我们只是添加了TabNavigator并将屏幕放入其中。 但是正如您所看到的，我们仍在使用StackNavigator进行以下修改，但是如果您愿意，可以将其完全删除。 导航现在看起来像这里。
让我们进一步前进，为标签导航按钮添加图标，然后创建第三页，然后创建第一页。
const TabNavigation = TabNavigator（{
第二：{
屏幕：SecondScreen，
}，
第三：{
屏幕：ThirdScreen，
}，
}）;
const Navigation = StackNavigator（{
第一：{
屏幕：FirstScreen，
}，
标签： {
屏幕：TabNavigation，
}，
}）;
导出默认导航；
我们的默认导航器是StackNavigator ，它的第一个元素是FirstScreen ，我们在堆栈中也有TabNavigator ，它有两个屏幕。 如果您更改任何屏幕的声明顺序，则会带来完全不同的导航。 这是反应导航的棘手部分。 声明顺序很重要。 您可以玩一点，看看结果。
现在是时候添加DrawerNavigator 。 这将使我们的导航更加有趣。
const TabNavigation = TabNavigator（{
第二：{
屏幕：SecondScreen，
navigationOptions：{
tabBarIcon：
}
}，
第三：{
屏幕：ThirdScreen，
navigationOptions：{
tabBarIcon：
}
}，
}）;
const Navigation = StackNavigator（{
第一：{
屏幕：FirstScreen，
}，
标签： {
屏幕：TabNavigation，
}，
第四：{
屏幕：FourthScreen，
}，
}）;
const RootNavigation = DrawerNavigator（{
主页：{
屏幕：导航，
}，
}）;
导出默认的RootNavigation;
您可以DrawerNavigator多种方式实现DrawerNavigator ，但在这种情况下，我们已将DrawerNavigator为顶级导航器。 您可以将自定义图标用于选项卡按钮，并根据需要装饰它们。
从屏幕截图中可以看到，当用户单击抽屉视图的“主页”按钮时，除了抽屉切换事件之外，什么都没有发生。 让我们改变这种行为，使我们的抽屉更美观一些，同时添加一些自定义按钮。
从'./Drawer'导入Drawer;
...
...
...
const RootNavigation = DrawerNavigator（{
主页：{
屏幕：导航，
}，
}，{
contentComponent：props => ，
}）;
在Navigation.js文件内部，我们仅包含contentComponent并导入了新的Drawer组件。
Drawer.js文件内容；
const Drawer =（道具）=>（
<Text style = {[styles.text，
{textDecorationLine：'下划线'}]}>
菜单
<Text onPress = {
（）=> props.navigation.navigate（'First'）
} style = {styles.text}>
转到第一个
<Text onPress = {
（）=> props.navigation.navigate（'Second'）
} style = {styles.text}>
转到第二
<Text onPress = {
（）=> props.navigation.navigate（'Third'）
} style = {styles.text}>
转到第三
）
非常简单和简短。 注意组件道具，它也包含navigation对象，因此我们可以轻松导航。 现在我们的应用看起来像；
使导航变得花哨
现在我们差不多完成了，让我们修改屏幕的导航标题并添加后退和抽屉切换按钮。 要配置标题，我们可以使用navigationOptions 。 这是第一个选项，您可以从“反应导航”文档部分中获取有关navigationOptions详细信息。
我们将以非常简单的方式实现我们的自定义标头。 实际上，React导航可以很好地处理标题逻辑，但是它仍然可能无法满足您的所有需求，因此您可能需要自定义。
您可以将导航标题视为每个屏幕顶部的组件，它与html导航菜单相似。 我们的自定义组件将具有后退按钮，抽屉切换按钮和标题部分。
在此应用程序中，我们将对Header.js组件进行编码，并将其包含在每个屏幕中。 当然，您可以制作一个模板页面并将其包含在该页面一次，也可以使用大量其他方法。 在React Native中，不要犹豫尝试不同的方法，您可以从每种方法中学到很多，但是尝试尽可能地遵循最佳实践来提高性能，因为在React Native中，性能仍然是一个问题。
这是我们Header.js文件的一部分；
<查看样式= {[styles.container，
{backgroundColor：props.bgColor && props.bgColor}]}>
{//如果导航状态键参数具有Init-.. etc。 它的意思是
//没有什么可退回的
//因此我们隐藏了后退按钮。
}
{！props.navigation.state.key.includes（'Init-'）&&
{
//如果您使用的是嵌套导航器，
//在navigation.goBack（）上使用它
//navigation.goBack（）无法正常工作，
//或按预期工作，因此不会使您后退:)
props.navigation.dispatch（NavigationActions.back（））
}}>
<FontAwesome名称= {'雪佛龙左'} size = {30}
color = {'white'} />
}
{props.title}
<TouchableOpacity onPress =
{（）=> props.navigation.navigate（'DrawerOpen'）}>
<FontAwesome名称= {'navicon'}大小= {30}
style = {{color：'white'}} />
SafeAreaView用于处理iPhone X布局，您可以在此处了解更多信息。
！props.navigation.state.key.includes（'Init-'）&&
如果导航状态键包含Init关键字，则表示它是第一个屏幕，因此我们不需要显示后退按钮。 navigation.goBack()不适用于混合导航，这就是为什么我们在其上使用NavigationActions.back()的原因。 我认为反应导航的棘手部分之一是混合导航。
props.navigation.navigate（'DrawerOpen'）
我们正在使用navigate('DrawerOpen')打开或抽屉化，或者您可以使用navigate('DrawerToggle') 。
对于每个屏幕，我们需要导入Header组件。
<标题标题= {'第一屏'}
bgColor = {'rgb（142，68，173）'} {... props} />
我们的导航对象位于props ，并将其发送给子组件。
在Drawer.js下面；
最后的话
我尝试通过React导航实现一些基础知识，您可以从Internet上查阅大量有用的教程和文档，以了解有关React Native中导航的更多信息。
这是示例应用程序的github repo链接和expo链接 。
我完全对本教程有任何疑问，建议和批评。 随时使用评论部分。
PC： Redux的实现并不是什么大问题，这就是为什么我没有参与其中。 您可以检查此链接，并对此有所了解。