琢磨react-native有一段時間了。對於我來說，它的確是前端開發工作者的福音，因為我可以利用它來寫app的代碼，而且基本可以一套代碼，多個平台使用。
早就想寫一篇隨筆記錄一下react native的學習歷程了，可是最近在navigator（導航，可以理解為‘頁面’跳轉）這里遇到了一個比較棘手的問題，所以耽擱了兩天，中途甚至產生過放棄的念頭，還一度去看了ionic以及QT的demo，思前想后，經過對比，發現還是react-native比較自己。剛好今天也將困擾已久額問題解決了，心情大好啊。今后我會將自己學習react native的心得體會都記錄在隨筆里面。
嘮叨了一些感慨，該進入正題了，react-native我就不做介紹了，直接來看怎么做一個demo吧。
由於我的電腦是windows系統，所以就說android的開發了。ios的資料比android更多，大家可以網上查找。
1.開發環境的配置
官網講的比較詳細，你也可以看react-native中文網參照配置
http://reactnative.cn/docs/0.27/getting-started.html#content
2.創建demo
假如你的E盤有一個react的空文件夾
（1）cd react
(2)react-native init demoproject//初始化一個react-native項目
(3)cd demoproject
(4)react-native run-android //此處常常容易出問題，android Packger可能不會自動運行,這時我的做法如下：
---1.用android studio打開demoproject中的android這個文件夾
---2.啟動調試模式運行這個android程序
在進行第二步操作時，我這邊使用的是真機調試。真機調試需要確保手機已經連接了，可以使用adb devices（命令行窗口輸入）進行查看。如果沒有查找到設備，可以嘗試重新連接你的安卓設備。
也可以嘗試adb kill-server,然后再重啟 adb start-server
---3.一般第二步成功后，手機上一般會提示錯誤。
這時候可以根據頁面的提示，在命令窗口輸入 adb reverse tcp:8081 tcp:8081
---4.手動啟動android項目
在命令窗口中鍵入react-native start
這步成功后，你就可以在手機上看到react的歡迎頁面了。
手機連接時請注意一下事項：
（1）.允許設備進行調試（一般在連接的時候會提示，如果沒有，你可以的到手機的設置里，找到類似於開發者選項，設置允許設備調試）
（2）.由於安卓手機真機調試時，可以使用搖動手機的方式進行重新加載js或者進行其他設置的操作。而一些手機在安裝app時，是默認禁用了該app的懸浮窗，所以你應該去到這個app的設置里面，打開懸浮窗功能。這樣才能進行方便之后的調試
3。與后台交互
常見的例如登錄界面。我沒有找到react-native中有類似於js那樣可以直接獲取dom元素的值得方法，不過它提供了一個另外的思路，改變state
import React,{Component} from 'react';
import{
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
import Welcome from './Welcome';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
age: null,
}
}
_openPage() {
this.props.navigator.push({
component: Welcome,
params: {
name: this.state.name,
age: this.state.age,
changeMyAge: (age) => {
this.setState({ age })
}
}
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor: '#FFFFFF' }}>
<Text>Form Page</Text>
<TextInput
value={this.state.name}
onChangeText={name => this.setState({ name })}
placeholder={'Enter your name'}
style={{ height: 40, width: 200 }} />
<Text>My age: {this.state.age ? this.state.age : 'Unknown'}</Text>
<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={{ color: '#55ACEE' }}>Update my age</Text>
</TouchableOpacity>
</View>
);
}
}
export default Login;
（注意：react native要導出的類，都需要首字母大寫）
state可以理解為構建這個組件時，定義的一個對象，對象里有諸如name,age等屬性。當輸入框的值發生改變時，綁定一個事件（onChange,onChangeText），動態改變state.name或者state.age的值。最后在進行登錄操作的時候，將這兩個變量傳給后台，驗證是否登錄成功。react推薦fetch進行http請求
關於fetch的詳細說明，參見我的另外一篇博客 http://www.cnblogs.com/Ricky-Huang/p/5566918.html
4.fetch請求成功后，navigator跳轉
fetch('http://192.168.1.136:8888/login', {
var navigatorOrigin=this.props.navigator;
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
if(data.code=='success'){
this.props.navigator.push({
title: 'Login',
component: Login
})
navigatorOrigin.push({
title:'Login',
component:Login
})
}
})
.catch(function (error) {
console.log('Request failed', error);
});
注意上面的藍色字體，我在這個地方被坑了很久，在fetch函數返回后，總是報錯
undefined is not an object (evaluating 'this.props.navigator.push')
當時拿到這個問題，沒有去分析代碼就直接百度了。在stackoverflow上也查找到一些解決方案，但是並沒有用對我用處
https://github.com/facebook/react-native/issues/416
過了兩天，我在此啟動這個app,同樣報錯。我思考着難道是因為進行了http請求之后導致this發生了變化，不再指向最初的類了嗎。於是我將以下代碼添加到了fetch函數入口處：
var navigatorOrigin=this.props.navigator;
再用以上紅色代碼替換掉藍色的部分。奇跡發生了，卡頓了兩天的app，終於可以如願登錄跳轉了。
回過頭看，這其實是一個很簡單的問題，就是http請求返回結果后，this的指向發生了變化。也提醒我寫代碼的時候，也需要多思考。
這篇隨筆寫的比較粗略，一些詳細的地方沒有介紹到，比如navigator是什么，怎么使用。不過不用擔心，http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2
這篇文章介紹的很仔細。
同時對於初學react-native的伙伴來說，多看看諸如此類的文章還是很有好處滴