以下均為近期學習React Native的個人心得，並不完善，歡迎園友拍磚。
React Native是什么？
React Native是一個框架，一個中間層，通過這套框架我們可以完成IOS和Android的開發。
為什么選擇React Native？
選擇React Native是因為它確實能夠解決我們的問題。
比較重要的兩個特性：
1.跨平台效率高。通過js可以同時編寫IOS和Android。
2.動態加載。服務端更新客戶端代碼與資源，很實用的技術。
用React Native就能完成開發任務嗎？
雖然有一些React Native的項目已經上線了，但是只通過React Native來開發項目局限性還是很大。
React Native目前暴露的組件與API只能滿足簡單的開發任務。
若只需要注冊頁+登錄也+列表頁+詳情頁，那么React Native很好用，網絡請求、UI視圖交互、頁面跳轉均提供了很好的支持。
但是需要使用PackageManager,ActivityManager等組件的話，就需要通過React Native和Native混合開發了。
學會了React Native就可以開發IOS程序了吧？
如果是非常簡單的需求，React Native應該可以滿足。但復雜一些的需求還是需要借助Native豐富的接口來實現(React Native作為一個框架，提供Native所有的接口不太現實)。
了解了React Native的基本情況，接下來開始簡單介紹基本開發知識。靜態頁面、交互頁面、頁面跳轉、網絡請求，基本可以理解React Native的使用了。Native模塊調用也是關鍵部分，但官方文檔描述的很清楚，依據文檔進行Native編寫與配置便可實現，就不介紹了。
靜態頁面
我們可以通過分析官方自帶的demo來了解靜態頁面的基本內容。
1 'use strict’; 2 import React, { 3 AppRegistry, 4 Component, 5 StyleSheet, 6 Text, 7 View 8 } from 'react-native'; 9 class rnDemo extends Component { 10 render() { 11 return ( 12 <View style={styles.container}> 13 <Text style={styles.welcome}> 14 Welcome to React Native! 15 </Text> 16 <Text style={styles.instructions}> 17 To get started, edit index.android.js 18 </Text> 19 <Text style={styles.instructions}> 20 Shake or press menu button for dev menu 21 </Text> 22 </View> 23 ); 24 } 25 } 26 const styles = StyleSheet.create({ 27 container: { 28 flex: 1, 29 justifyContent: 'center', 30 alignItems: 'center', 31 backgroundColor: '#F5FCFF', 32 }, 33 welcome: { 34 fontSize: 20, 35 textAlign: 'center', 36 margin: 10, 37 }, 38 instructions: { 39 textAlign: 'center', 40 color: '#333333', 41 marginBottom: 5, 42 }, 43 }); 44 AppRegistry.registerComponent('rnDemo', () => rnDemo);
1行。表示是js的嚴格模式。
2行到8行。導入依賴，可以理解為java中import XX.react-native.React;和import XX.react-native.React.AppRegistry;這種。
9行。自定義組件，組件是React Native的基本元素，可以類比Activity。
10行到24行。render()方法，我的理解是渲染頁面用的，里邊的xml和layout類似，都是用來布局的。
26行到43行。通過StyleSheet.create()方法，生成布局所需的屬性集合。在render()中的<View/>等添加style屬性就可以了。類比android中每個View的屬性，都是通過style來實現，我們創建的屬性集合便是style集合。
44行。注冊自定義組件。
交互頁面
即在靜態頁面上添加事件處理，我們以點擊事件為例。
1 <TouchableOpacity onPress={() => this.doNavigator()}> 2 <Text style={styles.welcome}> 3 Welcome to React Native new Page! 4 </Text> 5 </TouchableOpacity>
在android中我們通過setOnClickListener來實現點擊事件的注冊，而在React Native中，在相應的View外層套一個Touchable**的組件就可以實現這種效果了。點擊事件的處理，是通過onPress屬性來注冊的，例子中點擊后便會回調doNavigator()方法。
頁面跳轉
React Native的Android頁面跳轉與IOS頁面跳轉方式略有不同。最初按照IOS方式寫頁面跳轉，報錯，在Github上參考了幾個Android項目，發現Android的跳轉方式復雜一些。
不過頁面跳轉控制是在render()中，我有些迷惑，這個render()不僅具有頁面渲染的功能，竟然也有頁面跳轉的處理，功能似乎並不是那么清晰。
抱着先會用后理解的態度，我們只能先學習如何進行跳轉了。
首先要進行頁面跳轉控制器的配置，我是在第一個頁面配置的，代碼如下
1 render() { 2 return ( 3 <Navigator 4 initialRoute={{id: 'Page'}} 5 renderScene={this.actionTo}/> 6 ); 7 }, 8 actionTo(route, navigator){ 9 switch (route.id) { 10 case 'Page': 11 return (<Page navigator={navigator}/>); 12 case 'Page2': 13 return (<Page2 navigator={navigator}/>); 14 } 15 }
Navigator就是頁面跳轉控制器，initialRoute指的是初始頁面，renderScene是頁面跳轉時回調的方法，這里就是actionTo方法。
actionTo方法，便是通過route的屬性，來跳轉不同的頁面，可以這樣理解。
接下來需要頁面跳轉時，調用如下方法即可
1 this.props.navigator.push({ 2 id: 'Page2', 3 });
這里只簡單介紹了push操作，pop等操作查詢相關api即可。
網絡請求
網絡請求部分可以使用XMLHttpRequest，也可以使用更加函數式的fetch，以fetch為例進行post請求
1 fetch(url,{ 2 method: "POST", 3 headers: { 4 "Content-Type": "application/x-www-form-urlencoded" 5 }, 6 body: “uid=puff2"}) 7 .then((response)=>response.text()) 8 .then((textData)=>{ 9 var json=eval('(' + textData + ')'); 10 Toast.show("textData:"+textData,Toast.SHORT); 11 this.setState({code:textData}); 12 }) 13 .done();
post請求，添加formData時遇到了一些坑，最后只能通過例子中這種原始方式進行請求了。
至於response使用text()而不是json()來讀取數據，是因為直接解析son()會有問題，所以采用text()+eval進行了json解析。
不知道是不是后台搭得不規范，但是Android中Retrofit+Gson卻是可以的啊......
上述的內容，基本能夠理解React Native的基本使用了，作為一個Android碼農，用起來真的很怪，門檻還是有的。不過抱着學習的態度，嘗試一種新的技術，對我們碼農自身還是很有好處的。