简介

React Navigation是今后主推的一个单独的导航库react-navigation，用于取代老组件Navigator。

React Navigation的路由写法使其非常容易扩展导航逻辑，或是整合到redux中。由于路由可以嵌套使用，因而开发者可以根据不同页面编写不同的导航逻辑，且彼此互不影响。

React Navigation中的视图是原生组件，同时用到了运行在原生线程上的Animated动画库，因而性能表现十分流畅。此外其动画形式和手势都非常便于定制。

开始使用

Hello React Navigation

首先确保你已经搭建好了RN的开发环境。然后，新建一个RN工程，并且安装react-navigation库。

# 新建一个RN工程
react-native init TestApp

#务必要切换到工程的根目录
cd TestApp

#使用npm安装最新的库
npm install --save react-navigation

为了方便Android、iOS统一管理，在根目录下new Directory->'app'，将所有js文件，写在这个文件夹中。

FirstDemo

第一个小Demo，我们使用一个叫**StackNavigator **的组件。这是一个以"Stack"为概念的组件，也就是new screen会置于栈顶，当我们执行back操作时，会移除在栈顶的screen，从而展现前一个screen。
首先，我们来完成第一个HomeScreen，在app文件夹下，新建一个js文件，取名为HomeScreen.js：

"use strict";
import React, {Component} from 'react';
import {View,Text,Image, TouchableHighlight} from 'react-native';

export default class HomeScreen extends Component{
     //静态引入navigationOptions，title属性为标题
    static navigationOptions={
        title:'Home',
    }

    render(){
        return(
            <View style={{height:250,justifyContent:'space-around',alignItems:'center'}}>
                 //可点击的组件
                <TouchableHighlight>
                    <View style={{flexDirection:'row',width:180,height:50,alignItems:'center'}}>
                        <Image source={require('../image/item3.png')} style={{width:50,height:50}}/>
                        <Text style={{fontSize:15,marginLeft:15}}>YoYo</Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight>
                    <View style={{flexDirection:'row',width:180,height:50,alignItems:'center'}}>
                        <Image source={require('../image/item4.png')} style={{width:50,height:50}}/>
                        <Text style={{fontSize:15,marginLeft:15}}>DoggieX</Text>
                    </View>
                </TouchableHighlight>

                <TouchableHighlight>
                    <View style={{flexDirection:'row',width:180,height:50,alignItems:'center'}}>
                        <Image source={require('../image/item5.png')} style={{width:50,height:50}}/>
                        <Text style={{fontSize:15,marginLeft:15}}>Blink_Dagger</Text>
                    </View>
                </TouchableHighlight>

            </View>
        );
    }
}

上述代码中有图片，请根据自己的情况使用。
在index.android.js中，注册StackNavigator，并跳转到该Screen：

"use strict";
import {AppRegistry} from 'react-native';
import HomeScreen from './app/HomeScreen';
//引入StackNavigator
import {StackNavigator} from 'react-navigation';

const Router =StackNavigator({
    //注册screen
    Home:{screen:HomeScreen},
});
AppRegistry.registerComponent('TestApp', () => Router);

运行，可以看到效果出来了。

第一个页面

添加一个新的Screen

在app下，新建ChatScreen.js：

"use strict";

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

export default class ChatRoom extends Component {
    static navigationOptions = ({navigation}) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });

    render() {
        const {params} = this.props.navigation.state;
        return (
        <View style={{flex:1,justifyContent:'center'}}>
            <Text style={{textAlign:'center',fontSize:20}}>Chat with {params.user}!</Text>
        </View>
        );
    }
}

接下来，我们需要在HomeScreen的一个Item中添加点击事件，跳转到ChatScreen：

render(){
        //从属性props中获取navigate函数
        const {navigate} =this.props.navigation;
        return(
            <View style={{height:250,justifyContent:'space-around',alignItems:'center'}}>
                {/*点击onPress函数  调用navigate方法实现跳转功能  置顶跳转页面'Chat'  underlayColor设置成透明防止点击后出现黑色底色*/}
                <TouchableHighlight onPress={()=>navigate('Chat')} underlayColor='transparent'>
                    <View style={{flexDirection:'row',width:180,height:50,alignItems:'center'}}>
                        <Image source={require('../image/item3.png')} style={{width:50,height:50}}/>
                        <Text style={{fontSize:15,marginLeft:15}}>YoYo</Text>
                    </View>
                </TouchableHighlight>
                ...
            </View>
        );
    }

此时还并不能实现跳转功能，因为置顶的'Chat'页面并无法找到，还需要去index页面注册。

const Router =StackNavigator({
    //注册screen
    Home:{screen:HomeScreen},
    Chat:{screen:ChatScreen},
});

这样，最基本的跳转功能就实现了，最终看下效果图：

基本跳转

传递参数

比如我们想在ChatScreen中显示聊天者的名字，显然直接写死是不可取的，那么我就需要从前面一个页面将参数传递过来。那么要如何做呢？
我们只要在navigate方法中，指定一个明确的参数routeName，我们就能通过路由，将参数传递过去，比如在HomeScreen中，传递一个参数名为username的param。

{/*{user:'YoYo'}  表示传递一个名为user的参数，value为'YoYo'*/}
<TouchableHighlight onPress={()=>navigate('Chat',{user:'YoYo'})} underlayColor='transparent'>
                    <View style={{flexDirection:'row',width:180,height:50,alignItems:'center'}}>
                        <Image source={require('../image/item3.png')} style={{width:50,height:50}}/>
                        <Text style={{fontSize:15,marginLeft:15}}>YoYo</Text>
                    </View>
                </TouchableHighlight>

然后在ChatScreen中获取传递的param进行使用。

export default class ChatScreen extends Component{
    //获取参数拼接到标题  注意不是''  是``
    static navigationOptions=({navigation})=>({
        title:`Chat With ${navigation.state.params.user}`,
    });

    render(){
        const {params}=this.props.navigation.state;
        return(
            <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
                <Text style={{fontSize:20}}>Chating With {params.user} !</Text>
            </View>
        );
    }
}

Reload一哈，看看发生了什么。

传参跳转

Nesting Navigators

一个App的导航栏经常是由多个部分组成的。而在React Navigation中，这些都是可组装的，也就是你可以为你的App组装一个结构复杂的导航栏。
比如我们想实现TabLayout效果。