本文首发于博客：http://www.goody365.com/?p=39
第一节，我们用React Navigation来构建一个简单的聊天应用，比如类似微信这样的。
第一步：安装
首先要确定你已经安装好了所有RN的基础环境。
然后，创建一个新的项目，并且添加react navigation相关的包和类库。具体执行的步骤如下
# Create a new React Native App
react-native init SimpleApp
cd SimpleApp
# Install the latest version of react-navigation from npm
npm install --save react-navigation
# Run the new app
react-native run-android # or:
react-native run-ios
因为我们需要写一套代码同时运行在IOS和安卓上面，为了做到这一点我们把index.ios.js和index.android.js中的代码删除掉，然后用
import './App';
来替代
第二部分：导航栈介绍
为了向大家介绍导航栈的概念，我们在项目中尝试使用一下。
顾名思义，导航栈，就是让我们每开一屏，都放在原有的已经展现过的屏的栈之上。从当前屏幕返回的过程也是将该屏出栈的过程
我们先写个单屏应用。【代码来自官网英文文档】
importReactfrom'react';import{AppRegistry,Text,}from'react-native';import{StackNavigator}from'react-navigation';classHomeScreenextendsReact.Component{staticnavigationOptions={title:'Welcome',};render(){returnHello,Navigation!;}}constSimpleApp=StackNavigator({Home:{screen:HomeScreen},});AppRegistry.registerComponent('SimpleApp',()=>SimpleApp);
在上面的例子中，屏幕的标题可以在静态属navigationOptions,中设置。这个属性可以用来管理屏幕的表现形式
第三部：新增一个展现的屏幕
在App.js中新增如下代码：
classChatScreenextendsReact.Component{staticnavigationOptions={title:'Chat with Lucy',};render(){return(ChatwithLucy);}}
然后在HomeScreen上添加一个按钮 ，用routeNameChat.连接到ChatScreen。
classHomeScreenextendsReact.Component{staticnavigationOptions={title:'Welcome',};render(){const{navigate}=this.props.navigation;return(Hello,Chat App!navigate('Chat')}title="ChatwithLucy"/>);}}
这里是用了screen navigation prop来实现的屏幕跳转，但是要想让上面的代码起作用，还需要添加如下的代码
constSimpleApp=StackNavigator({Home:{screen:HomeScreen},Chat:{screen:ChatScreen},});
然后，你会在IOS上看到如下的效果。安卓也类似
第四步：在屏幕切换时传递参数
在ChatScreen中硬编码写死名字这种事情太强暴了，不好。比较温柔性感的方式，我们当然要动态的传递变量过去，然后渲染展现
比如，修改HomeScreen的代码如下【注意对比与之前的不同，自己去搜索不同点的作用和意思】
classHomeScreenextendsReact.Component{staticnavigationOptions={title:'Welcome',};render(){const{navigate}=this.props.navigation;return(Hello,Chat App!navigate('Chat',{user:'Lucy'})}title="ChatwithLucy"/>);}}
跳转来源方传递参数过来之后我们需要进行接收和渲染展示
classChatScreenextendsReact.Component{// Nav options can be defined as a function of the screen's props:staticnavigationOptions=({navigation})=>({title:`Chat with${navigation.state.params.user}`,});render(){// The screen's current route is passed in to `props.navigation.state`:const{params}=this.props.navigation.state;return(Chatwith{params.user});}}
当然，最好的方式是改变一下传递的参数，最好不要与例子里一样。
做完上面的操作之后你就能看到下面的效果了。
---------------------------------------------------本节完--------------------
