React Native中的React导航和导航器简介

从应用创意开始，您就计划同时支持iOS和Android设备，但是花时间学习，实现和优化每个平台的单独导航代码并没有意义。 否-有一个更好的方法，使用基于Javascript的纯导航库，该库使用本机驱动程序进行平滑过渡。 React Navigation采用了这种方法，避免了在Objective C / Swift / Java / Kotlin中的任何必需知识，从而使您可以将更多精力放在应用程序体验上。

借助React Navigation，我们可以立即使用现代应用程序期望的所有转换，包括标签导航 ， 抽屉式导航 （向上滑动）， 堆栈导航 （在整个层次结构中滑动）和深层链接 。

本文将介绍在为应用程序设置基本导航系统之前与导航器一起使用的方法。

与许多React项目一样，官方文档相当冗长，而且不太统一。 但是，在建立了一些基础知识之后，我建议您通读本文，以巩固您的理解并熟悉所有配置选项。

什么时候不使用？

至少对我来说，很难争论何时不对本地API使用React Navigation，因为经济上的好处和自定义远远超过了缺点。 如果您的应用程序没有执行非常密集的Javascript处理，则导航过渡不应该出现性能问题，该过渡支持60 FPS动画。 当然，当您在场景中引入更多复杂性时，您可以测试您的应用并找到表现与性能之间的平衡。

单纯的Javascript实现不会使您完全了解各个操作系统的本机API，但是您无法访问的内容是以受支持的导航器的一致性进行交易的，所有这些导航器都可以用纯Javascript配置。 对于一家注重Javascript的公司，希望在其所有产品中简化采用的技术，该软件包非常有意义。

总的来说，我对React Navigation以及React Native社区都非常满意，在撰写本文时，该软件包的每周下载量约为90k-100k。 数量可观。

使用yarn或npm将React Navigation直接安装到您的React Native项目中：

 毛线添加react-navigationornpm install-保存react-navigation 

理解导航器的作用本质上是使用React Navigation的唯一障碍。 让我们直接跳到他们身上。

React Navigation应用程序是一系列导航器 ，用于定义应用程序的屏幕流 。 如果现在还很模糊，那么图表就来了。

每个导航器都带有各种配置选项，我们可以用纯Javascript定义这些选项。 例如，堆栈的标题行为或选项卡的图标和样式。

导航器的行为将根据您选择的导航器而有所不同。 以下是我们可以使用的一些导航器选项：

我们还可以将导航器嵌入其他导航器中，以根据需要扩展我们的应用程序内容。 例如，我们可以在选项卡导航器中嵌入一个堆栈导航器，因此每个选项卡都包含一个层次化的视图。 这是React Navigation成为功能强大的工具的地方，它使我们可以根据需要雕刻导航。

自定义导航器的一个示例是FluidNavigator ，这是一个社区创建的导航器，它在屏幕之间导航期间提供共享元素转换 。 换句话说，它允许我们保留元素并在过渡到另一个屏幕时对其进行转换。

有关FluidNavigator的更多信息，请查看项目的Github页面。

商店应用示例

假设我有一个商店应用程序，并且我的登录屏幕包含3个标签：“ 目录” ，“ 搜索 ”和“购物袋”标签。 我们将如何为这种通用设置构建导航系统？

1. 我的应用程序可以在一个标签导航器上运行，该导航器由我的3个标签组成。
2. 我的目录选项卡包含一个堆栈导航器 ，使我可以从目录列表中向下钻取到产品范围，最后到产品页面。 我的搜索选项卡也将以相同的方式工作，还包括其自己的堆栈导航器 。
3. 实际上，我的bag选项卡可能只是一个组件，在点击bag选项卡图标时，它将按照我们习惯的默认方式呈现一个react组件。

这种结构在视觉上看起来像什么：

这里较暗的手机是我的导航器的默认屏幕。 从这里，我可以定义更多屏幕来填充堆栈，在图中由较轻的电话表示。

让我们解决一下考虑此示例时出现的一些问题：

1. 什么是屏幕？ 它们只是React组件及其render功能的结果，就像我们在React Native应用程序中可以看到的任何其他内容一样。
2. 如何使用标签导航器进行导航？ 在配置标签导航器时，我们为每个组件定义要渲染的React组件。 接下来，我们将对此进行探讨。
3. 如何使用堆栈导航器进行导航？ 我们使用navigation道具。 在水龙头上导航可能如下所示：

  const { 导航 } = this.props; onPress = {（）=> 
  navigation.navigate （'NavigatorScreen'， 
  {另外的数据：'supported！'， 
  productId：123}） 
  } 

4. 好的，既然我们在这里，那么屏幕组件呢？ 与第2点类似，这是在配置选项卡导航器配置中要呈现的组件时定义的。

当然，如果我们不能直接将其编码到React Native项目中，那么本教程的讨论将无用。 接下来，让我们看看它是什么样子。

如果您习惯使用Redux，则可以在JSX中渲染容器道具，而后者又会渲染其演示UI组件。 我们正在使用React Navigation部署类似的模式：

我们在JSX中渲染Navigator对象，这又将渲染它的默认屏幕组件。

实际上，您可能会在根应用程序组件中呈现根导航器：

App.js：

 从'react'导入React； 
  导入{createBottomTabNavigator， 
  createStackNavigator}来自“反应导航”； 
  ... 
 导出默认类MyApp扩展了React.Component {render（）{ 
  return（  ）; 
  } 
  } //配置导航器... 

太好了，我们刚刚导入了几个我感兴趣的导航器，它们是react-navigation中的Tab和Stack Navigators。 我还渲染了AppTabNavigator-它充当我的应用程序的根导航器。

AppTabNavigator如何构造？ 以以下方式：

• 首先使用createStackNavigator来定义和配置Catalog和Search导航器。
• 然后使用createBottomTabNavigator定义和配置AppTabNavigator，其中的我们的Catalog和Search导航器作为要为每个选项卡呈现的组件。
• 我们的Bag标签仅包含BagScreen组件，该组件未链接到任何导航器。

因此，通过首先定义“ 目录”和“ 搜索”导航器，然后可以将它们包括在AppTabNavigator导航器配置中：

 导入{CatalogueScreen， 
 类别屏幕， 
 产品屏幕 
  SearchScreen， 
  SearchResultsScreen， 
  BagScreen}来自“ ./MyScreens”； 
  const CatalogueNavigator = createStackNavigator（{ 
 目录：CatalogueScreen， 
 类别：CategoryScreen， 
 产品：ProductScreen 
  }，{ 
  //配置选项... 
  }）; 
  const SearchNavigator = createStackNavigator（{ 
  SearchHome：SearchScreen， 
  SearchResults：SearchResultsScreen 
  }，{ 
  //配置选项... 
  }）; 
  const AppTabNavigator = createBottomTabNavigator（{ 
 目录：CatalogueNavigator， 
 搜索：SearchNavigator， 
 包：BagScreen， 
  }，{ 

  navigationOptions ：（{{navigation}）=>（{ 
  //在这里为每个标签定义图标... 
  }）， tabBarOptions ：{ 
  initialRouteName：'目录'， 
  activeTintColor：“＃fff”， 
  inactiveTintColor：'#ddd'， 
 风格：{ 
  backgroundColor：'＃4d535e'， 
  } 
  } 
  }）; 

我暂时将一些配置选项留为空白。 分解配置导航器的过程：

1. 导入我们需要充当屏幕的所有组件。 实际上，它们将来自各种文件。
2. 通过在配置的每个屏幕中包含一个附带的键，为目录和搜索堆栈定义堆栈导航器。
   当使用 navigation.navigate() ，我们引用这些键，而不是组件的名称。
3. 通过传递目录和搜索导航器以及“ 袋”屏幕来定义我们的标签导航器。 第一个块定义了每个选项卡组件。 然后，我们为navigationOptions和tabBarOptions提供了tabBarOptions来个性化navigationOptions的外观和行为。

定义选项卡图标的广告方法是通过开关语句结合使用SVG图标库（例如IonIcons或Font Awesome）。

对于此示例，我将使用React Native Vector Icons包中的IonIcons。

我们在createBottomTabNavigator的navigationOptions块内配置选项卡图标。 对于我们的商店标签，它可能如下所示：

 从'react-native-vector-icons / Ionicons'中导入离子子; ... 
  const {routeName} = navigation.state; 

 让图标;  switch（routeName）{ 
 案例“目录”： 
  icon =`ios-shop $ {focused？  ''：'-outline'}`; 
 打破; 
 案例“搜索”： 
  icon =`ios-search $ {focused？  ''：'-outline'}`; 
 打破; 
 案例“袋”： 
  icon =`ios-appstore $ {focused？  ''：'-outline'}`; 
 打破; 
  } 

 返回<Ionicons 
 名称= {icon} 
 大小= {25} 
  color = {tintColor} />; 
  }， 
  }），... 

如您所见，我们将返回一个IonIcons组件，该组件的名称相对于我们的routeName 。 routeName源自我们的navigation.state对象。

在上面的示例中，我们现在设置为显示具有必要配置的标签栏。

在此结论之下是要点的完整代码示例。

无需重复太多有关导航的文档，我们可以使用navigation道具，该道具通过每个屏幕组件传递到不同的屏幕。

我还可以使用navigation.goBack()返回到上一个屏幕。 当您没有从堆栈导航器标题栏中显示<返回按钮时，这对于返回上一步很有用。

有关堆栈导航器标题栏的更多信息，请参见此处。

现在，您已经掌握了导航器，以及如何定义两个最常用的导航器，在React Navigation基础知识中轻而易举地运行。 掌握所有可用配置，以实现终极应用个性化。

navigator-example.js