React Navigation5.x第二章 Hello React Navigation

在web浏览器中，你可以使用标签在不同的页面之间跳转。当用户点击一个超链接的时候，这个URL会被推入浏览器的历史堆栈中。当用户点击返回按钮时，浏览器会将上一个URL置于历史堆栈的顶部，这样当前页面就会呈现先前被访问过的页面了。React Native并没有这样的内置全局历史堆栈，但是React Navigation可以帮助您解决这个问题。

React Navigation的堆栈导航器为你的app提供了在页面之间跳转和管理导航历史记录的方法。如果您的app只用了堆栈导航器。那么它就与web浏览器非常类似----你的app通过将路由压入和挤出导航堆栈来实现不同页面之间的转换。与web浏览器的不同之处就是上面这种方式的路由跳转仅仅是由React Navigation的堆栈导航器这一个组件来完成。

现在让我们来探讨一下最常用的导航器  createStackNavigator

安装堆栈导航器所需要的包

到现在为止我们所安装的包都是导航的一些基础架构所需要的包。在React Navigation中，每个导航器都有它自己的包。为了使用堆栈导航器，我们需要安装  @react-navigation/stack  这个包。

 

注意：@react-navigation/stack 依赖于 @react-native-community/masked-view和其他的我们在第一章中安装的包。如果你现在还没有安装这些包，那么请转到第一章按照安装方法安装这些包。

创建堆栈导航器

createStackNavigator 是一个方法，该方法会返回一个对象，这个对象有两个属性分别是Screen 和Navigator。我们可以通过他们来配置导航器。一个Navigator可以包含多个Screen元素作为其子节点。

NavigationContainer 这个组件是用来管理我们的导航树和相关导航状态。其必须包裹住整个导航架构。通常我们在app的根节点处渲染这个组件。这也可以解释为什么这个组件通常是从App.js文件中导出。

// In App.js in a new project

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function HomeScreen() {
  return (
    
      Home Screen
    
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
      
    
  );
}

export default App;

当你运行这个代码的时候，你会看到一个空白导航条和一个包含了HomeScreen组件的灰色内容区域。他们的样式都是堆栈导航器默认的样式，我们在以后会学习如何配置这些。

路由名称的首字母建议大写

screen的name和component属性是必须配置的，你可以在这里了解更多的可用属性。

配置导航器

所有的路由配置都会对应到我们导航器上的属性。因为我们还没有设置我们导航器的任何属性，随意它目前使用的是默认配置。

现在我们来为我们的堆栈导航器添加第二个screen。

function DetailsScreen() {
  return (
    
      Details Screen
    
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    
      
        
        
      
    
  );
}

现在我们的堆栈中有两个路由，一个是Home一个是Details。我们可以通过添加Screen组件的方式添加路由。Screen组件有一个name属性用来指定路由的名字，还有一个component属性，用来指定我们将要渲染的组件。

在这里，Home路由对应的是HomeScreen组件，Details路由对应的是DetailsScreen组件。本导航站的初始路由是Home路由。

注意：component属性接收的是组件而不是一个render方法。所以不要给它传递一个内联函数（比如component={()=>}）,否则你的组件在被卸载并再次加载的时候回丢失所有的state。有关这个的更多知识请查看传递额外属性这一节

设置option

导航器中的每一个screen都可以设置一些option。例如title，每个screen组件的option属性都是可以相互传递的。

有的时候我们想要为所有的screen设置同样的option，这时我们可以传递一个screenOptions属性到导航器中。

传递额外的属性

有的时候我们可能想要传递额外的属性到screen中，对于这个我们可以用两种方式实现。

1. 使用React context，用context provider包裹整个导航器来传递数据到screen中（不推荐）
2. 使用一个render函数作为组件的属性

  {props => }

注意：一般情况下，React Navigation会采用最优的方法来检查组件以防止不必要的渲染。使用render 回调函数，会丢失这些优势。所以，如果你使用一个render回调函数，那你就需要确认你使用了React.memo或者React.PureComponent来优化你的screen 组件，以避免一些性能问题。