React Navigation 入门（一）

RN 版本：0.50
操作环境：Windows 10
React Navigation 版本：1.0.0-beta.20

文章同步自简书：http://www.jianshu.com/p/dece7a09c6bf

前言

Navigator（导航器）是用来进行场景（页面）切换的组件，但是由于它的各种缺陷，从 0.44 开始，就被 fb 移除了，并且推荐大家使用更方便的 React Navigation 。

React Navigation 改进并取代了多个导航库，目前仍然在继续完善中。它包含 StackNavigator、TabNavigator 和 DrawerNavigator，你还可以自定义导航器。由于我也是跟着官方文档刚刚学，打算边学边总结加深印象，同时给大家一个参考（英文文档我看着实在很累）。不出意外，应该会写上好几篇。

StackNavigator 实现最基本的页面跳转

StackNavigator 一次渲染一个屏幕，并提供屏幕之间的转换。当一个新的屏幕打开时，它被放在栈顶位置。

首先安装 React Navigation：

yarn add react-navigation

然后导入到项目中（这里我们只用到了 StackNavigator）：

import {StackNavigator} from 'react-navigation';

下面的例子来源于 官网，我在其基础上加以说明，直接上代码。

const HomeScreen = () => (    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>      <Text>Home Screen</Text>    </View>);const DetailScreen = () => (    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>      <Text>Detail Screen</Text>    </View>);const RootNavigator = StackNavigator({  Home: {    screen: HomeScreen  },  Detail: {    screen: DetailScreen  }});export default RootNavigator;

两个 View 分别展示了一行文本，这里主要讲一下 RootNavigator 的定义。

其中 Home 和 Detail 是自定义的名称，screen 属性是要显示在页面上的视图组件。StackNavigator 顾名思义，栈导航器，这里写的 Home 页面就是第一个入栈的，也是程序运行时第一个显示的。

我们将其导入并注册，

import RootNavigator from './RootNavigator';AppRegistry.registerComponent('BlogDemo', () => RootNavigator);

运行。

可以看到第一个页面已经显示出来了，并且自带了一个类似 ToolBar 的东西，这个东西怎么去掉，我还没有研究到。

好了，这不是重点。

下面说一说如何跳转到 Detail 页面。我们在 HomeScreen 中稍作修改，

const HomeScreen = ({navigation}) => (    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>      <Text>Home Screen</Text>      <Button          onPress={() => navigation.navigate('Detail')}          title='Go to Detail'/>    </View>);

可以看到在方法的参数中添加了一个 {navigation} 的参数，暂时先不需要知道它的具体工作原理，只要知道在某个页面被 StackNavigator 加载的时候，会自动分配一个 navigation 属性就可以了。这个属性就是用来驱动页面之间的跳转的。navigate(routeName, params, action) 这个方法有三个参数，目前只说第一个。routeName 表示已经注册过的目标路由的名称，也就是我们打算跳转到的页面，这里就是 Detail，由于是自定义的名称，书写的时候不要写错了。

为了美观（大概吧），我们再给两个 ‘ToolBar’ 加上标题。

const RootNavigator = StackNavigator({  Home: {    screen: HomeScreen,    navigationOptions: {      headerTitle: 'Home'    }  },  Detail: {    screen: DetailScreen,    navigationOptions: {      headerTitle: 'Detail'    }  }});

然后跑起来：

Detail 页面还自带了一个返回按钮，是不是很神奇？

最后呢，一般来说，每个页面都是单独写在一个 js 文件中的，这样的话，该如何取到 navigation 参数并进行页面跳转呢？

我们之前说过了，在某个页面被 StackNavigator 加载的时候，会自动分配一个 navigation 属性。所以如果我们把 HomeScreen 和 DetailScreen 单独拿出来，可以这么写，以 HomeScreen 为例：

export default class HomeScreen extends Component {  constructor(props) {    super(props);  }  render() {    return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>      <Text>Home Screen</Text>      <Button          onPress={() => this.props.navigation.navigate('Detail')}          title='Go to Detail'/>    </View>;  }}

没有错，我们可以直接通过 this.props.navigation 获取到它，然后执行 navigate() 方法。

但是，官网却是这么写的（代码似乎和本节不一致，因为是在另一个地方粘的，请先忽略，这不是重点）：

class HomeScreen extends React.Component {  render() {    const {navigate} = this.props.navigation;    return (      <View>        <Text>This is the home screen of the app</Text>        <Button          onPress={() => navigate('Profile', {name: 'Brent'})}          title="Go to Brent's profile"        />      </View>     )   }}

第一眼看上去我懵逼了， const {navigate} = this.props.navigation; 是个什么鬼？

仔细想想，其实这就是解构赋值嘛。我在 React Native 入门（五） - Props（属性） 这篇文章中，还专门写过，自己都差点忘记了。

它们不过是不同的写法，效果是完全一致的，图就不贴了。先暂时写这么多，等我继续研究研究再更新吧。