本文首發(fā)于博客：http://www.goody365.com/?p=39

第一節(jié)，我們用React Navigation來構(gòu)建一個簡單的聊天應(yīng)用，比如類似微信這樣的。

第一步：安裝

首先要確定你已經(jīng)安裝好了所有RN的基礎(chǔ)環(huán)境。

然后，創(chuàng)建一個新的項目，并且添加react navigation相關(guān)的包和類庫。具體執(zhí)行的步驟如下

# 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';

來替代

第二部分：導(dǎo)航棧介紹

為了向大家介紹導(dǎo)航棧的概念，我們在項目中嘗試使用一下。

顧名思義，導(dǎo)航棧，就是讓我們每開一屏，都放在原有的已經(jīng)展現(xiàn)過的屏的棧之上。從當(dāng)前屏幕返回的過程也是將該屏出棧的過程

我們先寫個單屏應(yīng)用?！敬a來自官網(wǎng)英文文檔】

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);

在上面的例子中，屏幕的標(biāo)題可以在靜態(tài)屬navigationOptions,中設(shè)置。這個屬性可以用來管理屏幕的表現(xiàn)形式

第三部：新增一個展現(xiàn)的屏幕

在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來實現(xiàn)的屏幕跳轉(zhuǎn)，但是要想讓上面的代碼起作用，還需要添加如下的代碼

constSimpleApp=StackNavigator({Home:{screen:HomeScreen},Chat:{screen:ChatScreen},});

然后，你會在IOS上看到如下的效果。安卓也類似

第四步：在屏幕切換時傳遞參數(shù)

在ChatScreen中硬編碼寫死名字這種事情太強暴了，不好。比較溫柔性感的方式，我們當(dāng)然要動態(tài)的傳遞變量過去，然后渲染展現(xiàn)

比如，修改HomeScreen的代碼如下【注意對比與之前的不同，自己去搜索不同點的作用和意思】

classHomeScreenextendsReact.Component{staticnavigationOptions={title:'Welcome',};render(){const{navigate}=this.props.navigation;return(Hello,Chat App!navigate('Chat',{user:'Lucy'})}title="ChatwithLucy"/>);}}

跳轉(zhuǎn)來源方傳遞參數(shù)過來之后我們需要進行接收和渲染展示

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});}}

當(dāng)然，最好的方式是改變一下傳遞的參數(shù)，最好不要與例子里一樣。

做完上面的操作之后你就能看到下面的效果了。

---------------------------------------------------本節(jié)完--------------------