React Native 入门 --- React Navigation 介绍

[felix-cao]

React Navigation 是一个为 React Native App 提供路由(Routing)和导航(Navigation)功能。通过本文的学习，需要理解下面两个概念

• Screen Component
• Stack Navigator 组件

一、简介

浏览器中有内置的 window.history 以栈的形式管理着历史记录。入栈即进入一个新的页面，出栈即后退至上一页面。

ps: 要理解上面的一句话请阅读下面两篇文章：

• 《JavaScript BOM --- History 浏览历史记录对象》 JavaScript BOM --- History 浏览历史记录对象 #104
• 《HTML5 中 history API 解读》 HTML5 中 history API 解读 #119

可惜的是React Native 没有这种内置的全局的历史记录管理方式，React Navigation 的诞生就是为了解决这个问题。

React Navigation 是一个为 React Native App 提供路由和导航功能， 与浏览器中 window.history 如出一辙，以栈的形式保存着历史记录吗。

React Navigation 源于 React Native 社区对一个可扩展且易于使用的导航解决方案的需求，它完全使用 JavaScript 编写（因此你可以阅读并理解所有源码）。

React Navigation 主要有以下三种导航:

• StackNavigator, 一次只渲染一个页面，并提供页面之间跳转的方法。 当打开一个新的页面时，它被放置在堆栈的顶部
• TabNavigator, 渲染一个选项卡，让用户可以在几个页面之间切换
• DrawerNavigator 提供一个从屏幕左侧滑入的抽屉

此外， React Navigation 还提供酷炫的切换动画。

二、安装

假设你的 React Native App 项目目录为 weat-client

cd ./weat-client
yarn add react-navigation
# or with npm
# npm install --save react-navigation

OK， 现在就可以在你的项目中使用 React Navigation 了。

三、Hello Navigation

下面结合 React Navigation 写一个 Hello Navigation，在用 expo init just-eat 初始化一个名为 just-eat 项目中，根目录下有个 App.js.

// In App.js
import React from "react";
import { View, Text } from "react-native";
import { createStackNavigator, createAppContainer } from "react-navigation";

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

const AppNavigator = createStackNavigator({
  Home: {
    screen: HomeScreen
  }
});
const AppContainer = createAppContainer(AppNavigator);
export default AppContainer;

上面的代码我们我们来解读一下：

• 首先创建了一个名为 HomeScreen 的 Screen Component(即Screen组件)，
• 然后将 HomeScreen 交给 AppNavigator 这个导航栈组件(Stack Navigator)去管理
  • AppNavigator 这个导航栈组件是通过 createStackNavigator 函数创建的。
  • createStackNavigator 函数接收一个路由配置对象，后面会详细讲这个路由配置对象。
• 最后把 AppNavigator 这个导航栈组件放到 AppContainer 容器组件中，最后导出。

snacks 跑一把

最后把 Hello Navigation 放到 snacks 中跑一吧.

Reference

• React Navigation 官网
• React Navigation Docs
• React Navigation API