大家好┏ (^ω)=，許久不見，一不小心斷更就成為了一種習(xí)慣，因為最近掉React Native的坑里，無法自拔啊～(╯‵□′)╯︵┻━┻。
關(guān)于React Native是什么，各位可谷歌之，這里主要給大家安利下React Native，總結(jié)下一些從Android到React Native相關(guān)的概念和基礎(chǔ)。來吧，互相傷害啊(?￣? ?? ￣??)。

本文并非講解入門基礎(chǔ)，更多是給Android原生開發(fā)學(xué)習(xí)和理解React Native，前半部分主要是閑談和安利，后半部分是相關(guān)的入門，請緊張的往下看Σ（?□?；）

注：喜歡干貨的可以直接跳到后面的：帶著Android開發(fā)來理解React Native

請收起你不屑的眼神

為什么要學(xué)React Native？

• 因為現(xiàn)在許多主流的應(yīng)用都有React Native的影子，它對比原生開發(fā)更為靈活，對比H5體驗更為高效，而且跨平臺的支持特性。
• 相對ionic這類PhoneGap，它效率更高，和原生之間的交互更方便。
• 多個版本迭代后的今天，它已經(jīng)擁有了豐富第三方插件支持。
• React Native解決不了的，可以通過各位熟悉的原生來解決。
• 更方便的熱更新。

當(dāng)然，React Native的坑也不在少數(shù)：

• 盡管是跨平臺，但是不同平臺Api的特性與顯示并不一定一致。
• 相對增大了app的體積。
• 調(diào)試’相對‘麻煩。
• Android上的兼容性問題。

總的來說，React Native適合作為項目中的補充，而不是作為核心去開發(fā)APP。

因為盡管是跨平臺和快捷開發(fā)，但是以React Native為核心，去開發(fā)稍微偏中型以上的項目，后期維護(hù)的人員絕對不比原生的少多少，而且項目大了，體驗依舊是個大問題。

相反，把React Native作為項目開發(fā)中的補充，可以在一定程度上實現(xiàn)平臺業(yè)務(wù)的統(tǒng)一，還有靈活的開發(fā)效率，補充原生的不足。

此時此刻，此情此景

如何入門？

作為原生開發(fā)，因為React Native的特殊性，在入門的時候會比前端開發(fā)更慢一些，除非你會基礎(chǔ)的javascript，ES6語法，React相關(guān)基礎(chǔ)知識，不然這一層面確實相對會缺乏優(yōu)勢。

原生開發(fā)在React Native的優(yōu)勢是后期，React Native隨著業(yè)務(wù)的增加，單純的React Native時時無法滿足需求，那時候熟悉原生、又掌握了React Native的你，一定能給出更好的解決方案。

所以不要放棄（我會告訴你中途我都放棄好幾次了嘛？），萬事開頭難，何況你已經(jīng)被Android坑了這么久，怕(￣￣;)什么？剛開始想到要學(xué)習(xí)js和es6，確實會有些怠惰，但這步踩下去，你將會打開新世界的大門，哲學(xué)大門就在前方(?￣? ?? ￣??)。

目瞪口呆

那么入門前你需要知道：

• javascript基礎(chǔ)（不懂？不怕，學(xué)習(xí)React的時候一起熟悉）
• ES6語法（不懂？不怕，學(xué)習(xí)React的時候一起熟悉）
• React 還是必須學(xué)習(xí)一下，可以不必太深入，但是至少了解下思路也好。

React 的核心思想是：封裝組件。React Native就是按照一個個組件組成App，可以認(rèn)為，基礎(chǔ)的React Native，就是一個Activity，里面放著許多的組件，跳轉(zhuǎn)不同的組件，實現(xiàn)不同的頁面。

React的學(xué)習(xí)可以通過這個了解: 點我去看視頻。
React相關(guān)的資料 ：點我資料。

上面的資料足夠你了解React，了解了React，你才能更好的學(xué)習(xí)React Native，如果對于javascript和ES6還不了解的，通過上述React學(xué)習(xí)可以同步了解。
打了那么多雞血，那么趕緊，讓我們先走下面，用Android的基礎(chǔ)，來了解React Native的‘哲學(xué)‘吧。

帶著Android開發(fā)來理解React Native

1、開發(fā)環(huán)境

Android開發(fā)轉(zhuǎn)過來的，推薦Webstrom，因為它和Android Studio同出一家，快捷鍵、插件、git版本管理等等基本不需要二次學(xué)習(xí)，無需多慮了。至于開發(fā)環(huán)境配置，跟著下方鏈接妥妥的。

Webstrom 簡單配置

React Native 開發(fā)環(huán)境配置

2、項目理解

React Native創(chuàng)建工程，是通過在命令終端輸入 react-native init 你的項目名字 來創(chuàng)建工程的，創(chuàng)建的工程會從網(wǎng)絡(luò)端，同步到你終端所在路徑的本地，生成一個和android project類似的項目，如下圖。

其中關(guān)鍵的文件有：

• android文件夾，就是一個可以用android studio打開的android項目。
• ios文件夾，是一個可以用xcode打開的ios項目。
• index.android.js，這是android的React Native入口文件。
• index.ios.js，這是ios的React Native入口文件。
• package.json，類似android studio的build.gradle，你依賴的庫都寫在里面。
• node_module文件夾，你依賴的庫下載下來都存放在里面，屬于git的忽略文件，你要找的依賴庫源碼也在里面，包括React和React Native。
• jscode文件夾，是自己創(chuàng)建的文件夾，用來存放自己寫的js文件。

這里需要理解的是：

package.json，類似于android studio中的build.gradle添加遠(yuǎn)程依賴，不同的是，package.json大多數(shù)時候不需要我們手動添加，我們只需要在根目錄通過命令行，npm install xxxxxx --save 就可以依賴一個庫了。

install之后，庫的依賴信息，自動被寫到package.json里面，對應(yīng)的庫也會被下載到node_module文件夾中，類似android studio依賴后把aar同步到本地。

package.json

node_module是一個忽略文件，提交的時候不需要提交到git上，類似android studio遠(yuǎn)程依賴下來的aar，也不會提交到git上。其他人在使用React Native項目時，只需要npm install，工程就會根據(jù)package.json，去同步下載各個依賴庫到node_module。

注：有時候還需要運行react-native link 或 react-native link xxx，這是因為有些第三方庫是通過原生代碼加React Native實現(xiàn)的，通過這個命令，可以自動把相關(guān)的配置代碼，自動添加到android和ios工程中。

3、Android開發(fā)需要理解的React Native

1）React Native 其實是運行在ReactActivity上

一般情況下只在一個activity上運行，一般情況下是因為，你也可以自己寫新的Activity，繼承ReactActivity來實現(xiàn)你想要的邏輯。

項目默認(rèn)創(chuàng)建好了MainActivity

2）Application默認(rèn)創(chuàng)建工程時，就會繼承ReactApplication

其中getPackage()就是返回需要與原生交互的包，MainReactPackage時初始化生成，其他是你react-native link命令時幫你插入的。當(dāng)然，你也可以自己寫與原生交互的模塊。

3）路由（頁面跳轉(zhuǎn)）

React Native默認(rèn)是運行在一個Activity上，那么頁面之間的跳轉(zhuǎn)自然不是Activity之間的跳轉(zhuǎn)，而是通過** Navigator**來實現(xiàn)跳轉(zhuǎn)的。

是的，Navigator是用來做跳轉(zhuǎn)的，通過場景（Scene）來指定跳轉(zhuǎn)對象。這里Scene類似Intent的作用，告訴Navigator我要去哪里，Navigator負(fù)責(zé)場景推入和退出。（推薦使用react-native-router-flux框架實現(xiàn)）。

4）state，狀態(tài)

更新界面，修改顯示，加載數(shù)據(jù)，用戶交互，都是靠它，它是整個React Native的核心之一，React Native組件的state變化了，那么它就會重新渲染，所以維護(hù)state，通過數(shù)據(jù)或者動作更新state等，是React Native的重點，也是和原生很大差異的地方。

所以你就看到redux這個東西，也許第一次接觸你會覺得它很難理解，但是你只需要知道，它的核心就是讓你更好的維護(hù)React的state，統(tǒng)一管理和處理state，所以后期redux-thunk會成為你React Native的管理利器。當(dāng)然，如果組件或項目不復(fù)雜，完全不必要接觸它。

“組件的state改變了，所以界面變化了?！?/strong>

5）編譯調(diào)試

編譯其實很簡單，android其實就是在項目的根目錄終端輸入react-native run-android就可以編譯安裝，IOS本人習(xí)慣是，通過點擊ios文件目錄下的xcodeproj文件，打開xcode直接點擊運行。

對，就是我

當(dāng)前，剛剛接觸React Native，運行不起來是時有的事情，百度谷歌一個一個解決就好了，大部分時候都是忘記npm install，react-native link，ip不對，node服務(wù)沒有重新啟動等等，相信我，React Native會讓從此討厭上紅色！

React Native的調(diào)試是靠chrome瀏覽器來調(diào)試的，沒錯，瀏覽器，這樣很前端吧～哈哈哈(?)。通過搖晃手機(jī)（模擬器使用快捷鍵 android Command? + M / ios Command? + D）在React Native 應(yīng)用彈出下方頁面。Debug JS Remotely就是打開調(diào)試。

圖片來源網(wǎng)絡(luò)，侵刪

在瀏覽器可以看到如下頁面，有源碼，可以斷點，看輸出，調(diào)試參數(shù)，應(yīng)有盡有。

圖片來源網(wǎng)絡(luò)，侵刪

調(diào)試相關(guān)的文章推薦 : React Native調(diào)試技巧與心得。

最后

其實還有很多可以聊的，秉承著不能讓我一個瞎的精神，安利他人入教，我可是孜孜不倦啊?？上б驗闀r間關(guān)系（懶），想想這篇文章拖了快一個月，如今還在電腦里躺尸，其他的還是等第二期吧。等有人看了再說吧。╮(╯╰)╭好了，趕緊補基礎(chǔ)吧：http://reactnative.cn React Native 中文官網(wǎng)。

2、從Android到React Native開發(fā)（二、通信與模塊實現(xiàn)）

3、從Android到React Native開發(fā)（三、自定義原生控件支持）

4、從Android到React Native開發(fā)（四、打包流程和發(fā)布為Maven庫）

一、本人github 主頁

二、RN完整學(xué)習(xí)項目

三、點我，我是React Native 練習(xí)項目。

還是熟悉的那只貓