ReactNative的文檔地址有多個，如果你英文夠好，就去研讀官方的文檔吧，
如果讀原文比較吃力，中文官網也是不錯的選擇。
下面是我個人記錄的一些筆記，僅供初學者入門參考
預科
入門React Native前需要了解一下知識，這樣能幫助你更快的掌握RN
Node：Node.js 教程
ReactJS：《React 入門實例教程》
ES6：《ECMAScript 6 入門》
環境
系統環境要求
IOS : MacOS, 黑蘋果
Android :MacOS, Linux, Windows
配置
所有的技術學習都應該從環境搭建開始，這里也沒什么好總結的，最好的方法就是跟著官網指導配置環境
如果你是node的老手，那就直接動手安裝以下環境吧：
- node
- npm
- react-native-cli
- Xcode
安裝Xcode IDE和Xcode的命令行工具（IOS開發依賴） - Android Studio
下載必須的插件：
a) JDK1.8+
b) Show Package Details
c) Android SDK Build Tools （指定23.0.1版本）
d) Android Support Repository
配置基礎環境：
a) ANDROID_HOME （如運行是遇到問題可參考此文http://www.lxweimin.com/p/a77396301b22）
b) JAVA_HOME
測試
react-native init RNDemo
cd RNDemo
react-native run-ios
如果你的虛擬機啟動了，那么恭喜你，你的環境已經配置成功！
如果運行報錯，可以文章最后找尋解決方案。
語法
首先需要了解一些基本的React的概念，比如JSX語法、組件、state狀態以及props屬性。
還需要掌握一些React Native特有的知識，比如原生組件的使用。
教程上的東西我就不多說了，官方文檔上有詳細的講解
直接從代碼上講解新手注意點吧
Hello World
傳統慣例，入門先行，Hello World
你可以新建一個項目，然后用上面的代碼覆蓋你的index.ios.js或是index.android.js 文件，然后運行看看。
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text style={styles.red}>Hello world!</Text>
);
}
}
const styles = StyleSheet.create({
red: {
color: 'red',
fontWeight: 'bold',
}
});
// 注意，這里用引號括起來的'HelloWorldApp'必須和你init創建的項目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
從語法上看，RN和ReactJS語法區別不大，都是采用JSX和ES6的形式，如果你對ReactJS和ES6不熟悉，建議你先拜讀下阮一峰的博文教程：《React 入門實例教程》，《ECMAScript 6 入門》
相較寫Web App，區別在于RN的語法引入了原生的組件
import { AppRegistry, StyleSheet, Text } from 'react-native';
RN中雖然使用JS寫原生UI，但不再使用常規HTML標簽 <div> 或是 <span> ，而是使用RN的組件 <Text>
AppRegistry 模塊寫在index.ios.js或是index.android.js文件里，用來告知React Native哪一個組件被注冊為整個應用的根容器，一般一個應用只運行一次。
僅僅使用props和基礎的View、Text、Image以及TextInput組件，就足以編寫各式各樣的UI組件了
樣式
按照JSX的語法要求使用了駝峰命名法：
- font-weight -> fontWeight
- background-color -> backgroundColor
React Native中的尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點：
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
事件
事件的注冊跟ReactJS沒什么區別
class MyButton extends Component {
_onPressButton() {
console.log("You tapped the button!");
}
render() {
return (
<TouchableHighlight onPress={this._onPressButton}>
<Text>Button</Text>
</TouchableHighlight>
);
}
}
此處注冊的組件為TouchableHighlight，具體使用哪種組件，取決于你希望給用戶什么樣的視覺反饋
- 一般來說，你可以使用TouchableHighlight來制作按鈕或者鏈接。注意此組件的背景會在用戶手指按下時變暗。
- 在Android上還可以使用TouchableNativeFeedback，它會在用戶手指按下時形成類似墨水漣漪的視覺效果。
- TouchableOpacity會在用戶手指按下時降低按鈕的透明度，而不會改變背景的顏色。
- 如果你想在處理點擊事件的同時不顯示任何視覺反饋，則需要使用TouchableWithoutFeedback。
常用的事件有：
點擊：onPress
長按：onLongPress
縮放：maximumZoomScale，minimumZoomScale
另外關于Props、State、樣式、布局、事件等知識點的詳解，官方文檔上都有詳細的講解，比較基礎，這里就不做介紹了
跨平臺
'Learn Once,Write Anywhere' and not 'Write Once,Running Anywhere'.
RN并不能算上是真正的跨平臺的語言，雖然可以通過打包實現不同平臺打包不同組件，但是有些組件需要我們針對不同平臺編寫不同代碼。這就要求我們不用儲備一些原生開發的知識。
工作原理
RN的本質是在兩個模塊之間搭建雙向橋梁，讓他們可以相互調用和響應，簡單的示意圖為
Native模塊
運行在主線程上(可能會有些獨立的后臺線程處理運算，當前討論中可忽略)
iOS平臺上運行Object-C/Swift代碼，Android平臺上運行Java/Kotlin代碼
負責處理UI的渲染，事件響應。
JS模塊
運行在JS引擎的JS線程上
運行JS代碼
負責處理業務邏輯，還包括了應該顯示哪個界面，以及如何給頁面加樣式。
Bridge模塊
Native和JS模塊之間不能直接通信，只能通過Bridge做序列化和反序列化，查找模塊，調用模塊等各種邏輯，最終反應到應用上
性能
使用React Native替代基于WebView的框架，使App刷新可以達到每秒60幀（足夠流暢），并且能有類似原生App的外觀和手感，雖然RN框架已經提供了這個平衡的能力，但平衡點的選擇卻掌握在開發者手中，即便是Native也無法避免開發方式帶來的性能消耗
性能影響原因
業務邏輯運行在JS線程上，負責API的調用，事件的處理，狀態的更新，而事件的響應UI的變化發生在主線程上，60幀/s的頻率要求每一幀的響應處理只有16.67(1000/60)ms，如果超過了16.67ms就會發生丟幀，如果丟幀超過100ms就會產生明顯的卡頓現象。所有降低每一幀運算的消耗才能提升性能。
性能影響切面
UI事件響應： 性能影響小
UI更新： JS側會向Native側同步大量的UI結構和數據，界面復雜、變動數據大，或者做動畫、變動頻繁，容易出現性能問題。
UI事件響應和UI更新同時出現： 兩種事件如果占用了過多的線程，就會導致另一種事件不能及時響應，表現在應用上就是卡頓
常見影響性能的點
console，ListView，動畫Animated
性能優化
經過多年的發展和優化，JS和Native可以在各自的模塊線程高效迅速的運行，性能的瓶頸主要在Bridge模塊上，尤其是在JS和Native模塊間頻繁的調用會導致Bridge壓力過大，產生卡頓
- 利用React自帶的Virtual Dom的Diff算法盡量減少需要同步的數據，合理利用setState方法
- 在遇到動畫性能問題時，可以使用Annimated類的庫，一次性把如何變化的聲明發送到Native側，Native側根據接收到的聲明自己負責接下來的UI更新。不需要每幀的UI變化都同步一次數據。
- Native和JS混編，把會大量變化的組件做成Native組件
- 遇到UI事件響應和UI更新同時，可以使用Interaction Manager把那些耗時較長的工作安排到所有互動或動畫完成之后再進行
App高性能開發引導
RN的開發并沒有一種高質量產出的方法，因為各個項目間有著不同的組件組合，因此只能通過高效的開發方式來盡可能的優化應用。
一般來說，通過幾版優化都能達到“極致體驗”的要求。
下面列一下高效開發方式的流水：
- 全JS實現，保證開發的高效率，高產出
- 發現問題先在JS測做優化，如上面提到的Annimated類庫，Interaction Manager。
- 真機測試，找全問題再做處理，避免出現連鎖bug
- JS測解決不了的問題再有Native組件完成。
關于熱更新
原理
1、RN是使用腳本語言來編寫的，是的代碼可以不用事先編譯便可即讀即運行
2、RN在發布時將代碼資源打包成一個文件 bundle js文件
3、其他的基礎插件不變，僅僅替換一個bundle文件就實現了熱更新
流程
Rushy
Rushy是國內RN團隊自主研發的一套熱更新包管理平臺
Pushy的特點：
- 命令行工具&網頁雙端管理，版本發布過程簡單便捷，完全可以集成CI。
- 基于bsdiff算法創建的超小更新包，通常版本迭代后在1-10KB之間，避免數百KB的流量消耗。
- 支持崩潰回滾，安全可靠。
- meta信息及開放API，提供更高擴展性。
- 跨越多個版本進行更新時，只需要下載一個更新包，不需要逐版本依次更新。
社區
RN同ReactJS一樣，有著強大的社區，從RN版本更新的速度上就可以看出來
平均2個月一個版本
google的搜索結果也能說明RN的影響力
開發者需要用到的組件在JS.Coach基本都可以找到。
參考&分享
- ReactNative 官方網站：http://reactnative.com
- ReactNative 中文官方網站：http://reactnative.cn
- React Native性能和效率平衡之謎：http://zhuanlan.51cto.com/art/201704/537115.htm
- React Native通信機制詳解：http://blog.cnbang.net/tech/2698/
- React Native 從入門到原理：http://www.lxweimin.com/p/978c4bd3a759
- React-Native學習指南：http://www.lxweimin.com/p/fd4591a978ba
- 【簡書專題】React Native開發經驗集：http://www.lxweimin.com/c/45054b9e38c7
