React Navigation 基础 2 : Hello React Navigation

Hello React Navigation

在浏览器中，链接到其他页面你可以使用HTML锚点标签(anchor tag)<a>。当用户点击一个链接时，当前页面的URL被压到浏览器历史记录栈中。当用户点击了回退按钮，浏览器会从浏览历史记录栈的栈顶弹出一项，然后当前活跃页面现在又变成了之前刚刚访问过的那个页面。React Native没有像浏览器这样一个全局的访问历史记录栈机制，正因此，React Navigation走进了我们的故事。

React Navigation的 StackNavigator提供给你的应用在不同屏幕之间切换和管理浏览历史记录的方法。如果你的应用只使用了StackNavigator ,概念上讲，这跟浏览器对导航状态的处理就很类似了 – 应用在和用户交互的过程中向浏览历史栈压入路由项或者从中弹出路由项，从而让你的用户看到不同的屏幕。跟浏览器的情况相比，这里一个关键的不同是React Navigation的StackNavigator提供了屏幕切换时你想在安卓或者iOS平台上会有的手势和动画效果。

开始使用 React Navigation我们需要做的是从一个 StackNavigator 开始。

创建一个 StackNavigator

StackNavigator 是一个函数，返回一个 React 组件。它接受一个路由配置对象(route configuration object)，和一个可选对象(option object,现在我们在本文下面的部分会暂时忽略这个对象)。因为StackNavigator函数返回的是一个React 组件，我们可以从 App.js中直接把它导出用作我们应用的根组件。

// In App.js in a new project

import React from 'react';
import { View, Text } from 'react-native';
import { StackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default StackNavigator({
  Home: { // 这里 Home 是路由名称 route name
    screen: HomeScreen, // screen 项是一个路由配置中唯一必要的项
  },
});

→ 执行这段代码
如果你执行了这段代码，你会看到这样一个屏幕 :
- 一个空白导航(头部白色区域）
- 一个灰色内容区域,包裹着组件HomeScreen

你看到的这个导航条和内容样式是StackNavigator的缺省配置，稍后我们会学习如何配置它们。

路由名称(route name)的大小写没有关系 – 你可以使用小写的 home,或者首字母大写的 Home,随便你。我们建议路由名称首字母大写。

 

路由配置中唯一必要的部分是 screen。更多其他可用的选项你可以阅读StackNavigator参考手册。

在 React Native中，App.js中导出的组件是应用程序的入口点(或者叫做根组件) – 是所有其他组件派生出来的地方。通常在根组件上有更多的控制会有更多用途，而仅仅导出一个StackNavigator做不到这一点，所以我们在下面导出一个仅仅渲染了一个我们的StackNavigator组件的其他组件作为应用的根组件 :

const RootStack = StackNavigator({
  Home: {
    screen: HomeScreen,
  },
});

// 这样你可以在继承自 Component 的 App 上有更多的控制
export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

添加第二个路由

RootStack组件没有任何属性设置 – 所有的配置都通过StackNavigator函数的options选项参数指定。而我们这里的options选项参数是空的，所以它就使用了缺省配置。要看一个使用了options选项参数的例子，我们向StackNavigator中增加第二个屏幕 。

// Other code for HomeScreen here...

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
      </View>
    );
  }
}

const RootStack = StackNavigator(
  {// 参数 1 : 路由配置对象
    Home: { // 上面例子已经提到的第一个屏幕
      screen: HomeScreen,
    },
    Details: { // 该例子新加的第二个屏幕
      screen: DetailsScreen,
    },
  },
  {// 参数 2 : 选项对象
    initialRouteName: 'Home',
  }
);

// Other code for App component here...

现在我们的栈中有两个路由了，Home和Details。Home路由对应屏幕HomeScreen组件,Details组件对应屏幕DetailsScreen组件。导航栈的初始路由是Home。到这里，很自然地就冒出了另外一个问题 : “我怎样从Home路由切换到Details路由呢?”。这就是下一章节所要覆盖的内容。

总结

• React Native 没有类似浏览器的内置导航机制。React Navigation用来完成这一功能，同时提供了iOS和安卓上的切屏时的手势和动画机制。
• StackNavigator是一个函数，接收一个路由配置对象参数和一个选项参数，返回一个React组件。
• 路由配置对象中的关键是路由名称和路由配置的值。一个路由配置中唯一必要的属性是screen项(指出该路由对应哪个组件)。
• 在StackNavigator的选项参数中使用 initialRouteName可以指定一个导航栈的初始路由。
• 目前为止所有的源代码

英文原文

该系列文章目录

React Navigation 基础 8 : 术语词汇表
React Navigation 基础 7 : 全屏模态
React Navigation 基础 6 : 头部按钮
React Navigation 基础 5 : 配置导航头部
React Navigation 基础 4 : 屏幕间切换参数传递
React Navigation 基础 3 : 屏幕间切换
React Navigation 基础 2 : Hello React Navigation
React Navigation 基础 1: 开始使用