從 Android 到 React Native 開發（1、入門）

 你們好┏ (^ω^)=，許久不見，一不當心斷更就成爲了一種習慣，由於最近掉React Native的坑裏，沒法自拔啊～(╯‵□′)╯︵┻━┻。
 關於React Native是什麼，各位可谷歌之，這裏主要給你們安利下React Native，總結下一些從Android到React Native相關的概念和基礎。來吧，互相傷害啊(˶‾᷄ ⁻̫ ‾᷅˵)。

本文並不是講解入門基礎，更可能是給Android原生開發學習和理解React Native，前半部分主要是閒談和安利，後半部分是相關的入門，請緊張的往下看Σ（・□・；）

注：喜歡乾貨的能夠直接跳到後面的：帶着Android開發來理解React Native

請收起你不屑的眼神

爲何要學React Native？

• 由於如今許多主流的應用都有React Native的影子，它對比原生開發更爲靈活，對比H5體驗更爲高效，並且跨平臺的支持特性。
• 相對ionic這類PhoneGap，它效率更高，和原生之間的交互更方便。
• 多個版本迭代後的今天，它已經擁有了豐富第三方插件支持。
• React Native解決不了的，能夠經過各位熟悉的原生來解決。
• 更方便的熱更新。

固然，React Native的坑也不在少數：

• 儘管是跨平臺，可是不一樣平臺Api的特性與顯示並不必定一致。
• 相對增大了app的體積。
• 調試’相對‘麻煩。
• Android上的兼容性問題。

 總的來講，React Native適合做爲項目中的補充，而不是做爲核心去開發APP。

 由於儘管是跨平臺和快捷開發，可是以React Native爲核心，去開發稍微偏中型以上的項目，後期維護的人員絕對不比原生的少多少，並且項目大了，體驗依舊是個大問題。

 相反，把React Native做爲項目開發中的補充，能夠在必定程度上實現平臺業務的統一，還有靈活的開發效率，補充原生的不足。

此時此刻，此情此景

如何入門？

 做爲原生開發，由於React Native的特殊性，在入門的時候會比前端開發更慢一些，除非你會基礎的javascript，ES6語法，React相關基礎知識，否則這一層面確實相對會缺少優點。

 原生開發在React Native的優點是後期，React Native隨着業務的增長，單純的React Native時時沒法知足需求，那時候熟悉原生、又掌握了React Native的你，必定能給出更好的解決方案。

 因此不要放棄（我會告訴你中途我都放棄好幾回了嘛？），萬事開頭難，況且你已經被Android坑了這麼久，怕(￣◇￣;)什麼？剛開始想到要學習js和es6，確實會有些怠惰，但這步踩下去，你將會打開新世界的大門，哲學大門就在前方(˶‾᷄ ⁻̫ ‾᷅˵)。

目瞪口呆

那麼入門前你須要知道：

• javascript基礎（不懂？不怕，學習React的時候一塊兒熟悉）
• ES6語法（不懂？不怕，學習React的時候一塊兒熟悉）
• React 仍是必須學習一下，能夠沒必要太深刻，可是至少了解下思路也好。

 React 的核心思想是：封裝組件。React Native就是按照一個個組件組成App，能夠認爲，基礎的React Native，就是一個Activity，裏面放着許多的組件，跳轉不一樣的組件，實現不一樣的頁面。

React的學習能夠經過這個瞭解: 點我去看視頻。
React相關的資料 ：點我資料。

 上面的資料足夠你瞭解React，瞭解了React，你才能更好的學習React Native，若是對於javascript和ES6還不瞭解的，經過上述React學習能夠同步瞭解。
 打了那麼多雞血，那麼趕忙，讓咱們先走下面，用Android的基礎，來了解React Native的‘哲學‘吧。

帶着Android開發來理解React Native

一、開發環境

 Android開發轉過來的，推薦Webstrom，由於它和Android Studio同出一家，快捷鍵、插件、git版本管理等等基本不須要二次學習，無需多慮了。至於開發環境配置，跟着下方連接妥妥的。

Webstrom 簡單配置

React Native 開發環境配置

二、項目理解

 React Native建立工程，是經過在命令終端輸入 react-native init 你的項目名字 來建立工程的，建立的工程會從網絡端，同步到你終端所在路徑的本地，生成一個和android project相似的項目，以下圖。

 
其中關鍵的文件有：

• 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文件夾，是本身建立的文件夾，用來存放本身寫的js文件。

這裏須要理解的是：

 package.json，相似於android studio中的build.gradle添加遠程依賴，不一樣的是，package.json大多數時候不須要咱們手動添加，咱們只須要在根目錄經過命令行，npm install xxxxxx --save 就能夠依賴一個庫了。

 install以後，庫的依賴信息，自動被寫到package.json裏面，對應的庫也會被下載到node_module文件夾中，相似android studio依賴後把aar同步到本地。

package.json

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

注：有時候還須要運行react-native link 或 react-native link xxx，這是由於有些第三方庫是經過原生代碼加React Native實現的，經過這個命令，能夠自動把相關的配置代碼，自動添加到android和ios工程中。

三、Android開發須要理解的React Native

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

 通常狀況下只在一個activity上運行，通常狀況下是由於，你也能夠本身寫新的Activity，繼承ReactActivity來實現你想要的邏輯。

項目默認建立好了MainActivity

2）Application默認建立工程時，就會繼承ReactApplication

 其中getPackage()就是返回須要與原生交互的包，MainReactPackage時初始化生成，其餘是你react-native link命令時幫你插入的。固然，你也能夠本身寫與原生交互的模塊。

3）路由（頁面跳轉）

 React Native默認是運行在一個Activity上，那麼頁面之間的跳轉天然不是Activity之間的跳轉，而是經過 Navigator來實現跳轉的。

 是的，Navigator是用來作跳轉的，經過場景（Scene）來指定跳轉對象。這裏Scene相似Intent的做用，告訴Navigator我要去哪裏，Navigator負責場景推入和退出。（推薦使用react-native-router-flux框架實現）。

4）state，狀態

 更新界面，修改顯示，加載數據，用戶交互，都是靠它，它是整個React Native的核心之一，React Native組件的state變化了，那麼它就會從新渲染，因此維護state，經過數據或者動做更新state等，是React Native的重點，也是和原生很大差別的地方。

 因此你就看到redux這個東西，也許第一次接觸你會以爲它很難理解，可是你只須要知道，它的核心就是讓你更好的維護React的state，統一管理和處理state，因此後期redux-thunk會成爲你React Native的管理利器。固然，若是組件或項目不復雜，徹底沒必要要接觸它。

 「組件的state改變了，因此界面變化了。」

5）編譯調試

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

對，就是我

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

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

圖片來源網絡，侵刪

 在瀏覽器能夠看到以下頁面，有源碼，能夠斷點，看輸出，調試參數，應有盡有。

圖片來源網絡，侵刪

調試相關的文章推薦 : React Native調試技巧與心得。

最後

 其實還有不少能夠聊的，秉承着不能讓我一個瞎的精神，安利他人入教，我但是孜孜不倦啊。惋惜由於時間關係（懶），想一想這篇文章拖了快一個月，現在還在電腦裏躺屍，其餘的仍是等第二期吧。等有人看了再說吧。╮(╯▽╰)╭好了，趕忙補基礎吧：reactnative.cn React Native 中文官網。

本人github 主頁

點我，我是React Native 練習項目。

仍是熟悉的那隻貓