本文由Marno投稿。 Marno的博客地址： http://www.jianshu.com/u/174a09ba6c25

本文原文：http://mp.weixin.QQ.com/s/xwSy2d8KmGPH03G4VmSnYA

為了尊重我們的鴻洋大神，特此在這里說明此文轉(zhuǎn)載鴻洋大神文章！！

非常棒的一篇經(jīng)驗文章，作者總結(jié)了自己學(xué)習(xí)React Native的歷程，對其中每個環(huán)節(jié)覺得比較好的資料進行了篩選并分享給了大家，并且自己也做了很多的總結(jié)以及示例demo，如果你對RN感興趣，而又一直不知道如何下手去學(xué)習(xí)，那么這篇文章非常適合你。

其實我也在學(xué)習(xí)RN，這篇文章我應(yīng)該也會非常詳細(xì)去學(xué)習(xí)的。

此外，文章中推薦了大量鏈接，微信文章內(nèi)部不支持外鏈，我都標(biāo)識藍(lán)色了，大家可以復(fù)制粘貼，或者通過原文訪問。

1 前言

從最開始開始接觸React Native（以下簡稱RN），到寫下第一篇博文后，就再也沒有寫過相關(guān)的文章了，隨著微信小程序的正式發(fā)布，其實也又一次將一個概念推到公眾面前，那就是全棧式前端，這是個什么概念呢？

大概意思就是一個人可以同時寫Android,iOS,Web程序。可能民間不乏一些大神java，OC，Swift，JS都寫得特別好，但我相信大部分人還是和我一樣，畢業(yè)后只從事一個方向的開發(fā)，所以要成為全棧式前端有比較大的困難。

但是隨著發(fā)RN布，這一切似乎變得有了可能。

這也是隨著社會進步不斷要求生產(chǎn)力提高后導(dǎo)致的必然發(fā)展趨勢。雖然這個概念早在RN前就有了，但是之所以能在這個時間火起來，那就說明時候到了。像手機上的指紋識別一樣，并不是蘋果第一個集成到手機上，但卻是蘋果把它用在了最正確的時代。現(xiàn)在連幾百元的手機都有指紋識別了。

所以如果去年你沒有去關(guān)注去學(xué)習(xí)RN 不要緊，但是隨著微信發(fā)布小程序，這再次說明了全棧式前端是一個趨勢，如果你還沒有趁機上車，那……那其實也沒啥，一門心思寫好Android其實也是可以的，畢竟專才也是要有的！

哈哈～前面說的有點危言聳聽了，但還是希望那些學(xué)有余力、熱愛并關(guān)注前端開發(fā)的人能早點搭上這趟車。雖然目前RN還有很多問題，比如首當(dāng)其沖的就是性能問題，但是隨著版本的不斷迭代，我相信這個問題遲早會被解決的。你問我那是什么時候？

現(xiàn)在RN版本是0.40，會不會是1.0發(fā)布的時候呢？哈哈～這個誰能知道呢，但是有生之年肯定會的！說了這么多，讓我們正式發(fā)車吧！

2 回答一些問題

（1）為什么寫此教程

首先主要是出于我們公司業(yè)務(wù)發(fā)展上的要求，并且我對RN開發(fā)很感興趣，因為它確實可以提高生產(chǎn)力，所以公司就指派我負(fù)責(zé)這次RN在公司移動端內(nèi)部的推行。其次是苦于網(wǎng)上雖然關(guān)于RN資料很多，但是卻沒有一個比較系統(tǒng)的學(xué)習(xí)方案，看視頻課程又覺得效率太低，這也導(dǎo)致我在學(xué)習(xí)RN的過程中浪費了大量的時間去搜集資料。

所以我想寫一篇文章記錄一下我的學(xué)習(xí)過程，將我從零開始的入門學(xué)習(xí)心得和大家分享一下。目的就是為了讓更多想學(xué)RN的人，不用再東奔西走的把時間浪費在搜集資料，能夠快速的入門進行學(xué)習(xí)。

（2）本文適合哪些人看？

1.熱愛前端開發(fā)，并且總想開發(fā)一些能看得見的東西 2.對RN有著像對女朋友一樣的興趣，愿意去了解他 3.可以不懂Web開發(fā)，但最好有一定Android或者IOS開發(fā)經(jīng)驗。 4.對RN完全不了解的新人（如果是RN老司機不巧看到了這篇文章，我想說…哥，收徒么？我骨骼精奇，是個碼代碼的好手…哥….誒….別走啊….我還跪著呢！）

（3）如何使用本教程？

看！多看！反復(fù)看！ 敲！多敲！反復(fù)敲！ 嘿嘿~說正經(jīng)的，必須要結(jié)合我給出的Demo中的代碼一起看。而且我會附上我在學(xué)習(xí)過程中梳理的思維導(dǎo)圖文件，可以結(jié)合起來和文章一起看，這樣學(xué)習(xí)的思路會更加清晰一些。

（4）需要先學(xué)習(xí)JavaScript，HTML，CSS么？

HTML和CSS沒什么要求，略懂就行，不懂也無所謂。但是JS還是要懂一點（臥槽，“一點”是多少？就和菜譜里的鹽少許一樣難以琢磨）。好吧，我再說詳細(xì)一點。把阮一峰老師的《ECMAScript 6 入門》（http://es6.ruanyifeng.com/）這篇關(guān)于ES6的文檔花一周時間詳細(xì)看一下其實就差不多了。至于JS里涉及的一些其他特性，閉包什么的，后面入門了再研究也可以。包括ES7關(guān)于網(wǎng)絡(luò)請求寫法的變化，我們也可以先不用管。

（5）如何編寫demo

是不是我們編寫每一個知識點的demo都要通過 【react-native init XXXX】的方式去新建一個項目呢？當(dāng)然不是，我們可以把所有代碼都寫到一個demo里，并通過分包進行管理（app的文件夾是自己創(chuàng)建的，名字自定），這樣自己看起來也比較方便。然后每個demo都通過import的方式導(dǎo)入到index.android/ios.js文件中進行使用。

3 第一階段《相識》

（1）內(nèi)容簡介

1.1）本教程共分為三個階段，第一階段主要是帶大家入門，熟悉一些RN基礎(chǔ)組件、JS語法等等。該階段結(jié)束后，基本可以搭建一個App框架了，甚至可以寫一些簡單的新聞類App，在該階段的教程中我仿寫的是【開眼v3.1.2】。

1.2）本文中有大量的內(nèi)容來自各家博客，所以出于對原文作者的尊重，我會直接給出原文鏈接并附上作者名字，如果看到對應(yīng)的章節(jié)，請大家跳轉(zhuǎn)到相應(yīng)的網(wǎng)址去看一下。

現(xiàn)在網(wǎng)上關(guān)于RN的文章太多，看的眼花繚亂結(jié)果卻往往不容易形成體系，所以我只整理了一些必須的內(nèi)容，而且相關(guān)的內(nèi)容看我推薦這幾篇文章基本也就夠了。

1.3）在開始第一階段的學(xué)習(xí)前，先來看一下完成這個階段的學(xué)習(xí)后，我們大概能做出一個什么效果來。希望借此也能給你一些學(xué)習(xí)的動力吧！上圖（被壓縮太厲害了，湊合看吧）！

（2）環(huán)境搭建（預(yù)計用時：1~2天）

按照RN中文社區(qū)的指導(dǎo)就可以了。不過過程中會遇到一些坑，我也附上我的踩坑記錄。我建議大家可以先看一下踩坑記錄，然后再開始安裝環(huán)境。

2.1） 環(huán)境搭建踩坑指南:

《一起學(xué)》安卓React Native開發(fā)–踩坑大全（持續(xù)更新…）http://www.jianshu.com/p/276cb2c0283a

2.2）環(huán)境搭建中文教程，點擊跳轉(zhuǎn)RN中文社區(qū)

http://reactnative.cn/docs/0.40/getting-started.html#content

2.3）開發(fā)工具安裝和配置 :

本文中使用WebStorm進行開發(fā)，也有人用Atom或Sublime，對此我想說：趕快換WebStrom吧。為了不牽扯什么不必要的問題，下載地址我就不貼了，自行破*解吧。我最多只能說一下我用的是下面這個版本的。

安裝好WebStorm后，為了更便捷的去開發(fā)，我們需要安裝一些插件，以及進行一些常用配置。

比如RN組件庫的安裝，添加一些常用的Live Templates等，下圖是我添加的兩個比較常用的，給大家參考一下，至于如何添加Live Template大家可以自行百度一下，比較簡單，我就不過多贅述了。

《[React Native]去掉WebStorm中黃色警告》——于連林520wcf（http://www.jianshu.com/p/9a006fbb5a2a）

配置Live Templates

（3）Hello World（預(yù)計用時：0.5天）

不教大家寫 Hello World 的教程,不是好教程！千萬注意！【要看注釋】哈！不然會很坑！

（4）了解 index.android/ios.js

index.android.js 和 index.ios.js 分別作為Android手機和iOS手機上程序開始的入口，所以我們先來了解一下這個文件的結(jié)構(gòu)。

1）組件導(dǎo)入?yún)^(qū)： 所有用到的組件都需要事先進行導(dǎo)入，包括樣式也需要進行導(dǎo)入 2）核心代碼區(qū)：所有邏輯代碼編寫的地方 3）組件樣式區(qū)：render()方法中用到的組件的樣式，可以集中在這里編寫 4）注冊啟動組件：組件只有注冊后才能運行。這里用到的ApPRegistry也需要在組件導(dǎo)入?yún)^(qū)進行導(dǎo)入

（5）Flex布局（預(yù)計用時：2~3天）

Flex布局是Web開發(fā)必備的技能，如果你是Web開發(fā)人員，可以直接跳過該部分內(nèi)容。但是也需要注意的是Web中的一些屬性在RN中是沒有的，而且屬性命名是通過小駝峰的方式進行命名的。

后面我會附上我自己整理的關(guān)于RN組件支持的屬性大全。可能不完善，但是常用的應(yīng)該是有了。如果Flex布局沒有練熟，還是不要看后面的了，所以請多花點時間在這里，甚至可以自己找一些比較有難度布局進行練習(xí)。

《Flex 布局教程：語法篇》——阮一峰（http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html） 《Flex 布局教程：實例篇》——阮一峰（http://www.ruanyifeng.com/blog/2015/07/flex-examples.html） 《React-Native的基本控件屬性方法》——冬瓜小生（http://www.cnblogs.com/Sweet-Candy/p/5695389.html） 我也整理了一份Excel表，方便用到的時候快速查閱（https://github.com/MarnoDev/HelloRN/blob/master/RN%E7%BB%84%E4%BB%B6%E5%8F%AF%E7%94%A8%E5%B1%9E%E6%80%A7%E6%95%B4%E7%90%86.xlsx） demo相關(guān)代碼在這里（https://github.com/MarnoDev/HelloRN/tree/master/app/01_flex_demo），如果你已經(jīng)下載了我整個HelloRN的項目，那代碼就在app/01_flex_demo中

（6）網(wǎng)絡(luò)請求（fetch）（預(yù)計用時：2~3天）

如果Flex布局你已經(jīng)練習(xí)的比較熟練了，那我們來學(xué)習(xí)一下網(wǎng)絡(luò)請求。其實現(xiàn)在的App大多都比較簡單，無非就是布局的展示，網(wǎng)絡(luò)數(shù)據(jù)的獲取等等。如果搞定這兩塊內(nèi)容，那我們至少會從RN的學(xué)習(xí)中獲取一些成就感了，也才有繼續(xù)下去的動力。

這里要說明的是，如果你是Android或iOS工程師，那你需要習(xí)慣一下RN處理Json數(shù)據(jù)的方式（或者說Web處理Json的方式），我們通過網(wǎng)絡(luò)請求回來的Json Object數(shù)據(jù)就可以直接進行操作，而不像Native開發(fā)，還需要通過什么額外的工具去進行Json的轉(zhuǎn)換。這也是Web開發(fā)比較方便的地方。

無論Json Object轉(zhuǎn)Json字符串，還是Json字符串轉(zhuǎn)Json Object，都是非常方便的。如果非要把網(wǎng)絡(luò)數(shù)據(jù)進行本地存儲，那也很方便，通過解構(gòu)賦值，直接就可以賦值給你創(chuàng)建的Model了。

為什么使用Fetch《傳統(tǒng) Ajax 已死，F(xiàn)etch 永生》——Cam（https://segmentfault.com/a/1190000003810652） 《使用Fetch先了解一下Promise 概念》——來自MDN社區(qū)（https://developer.mozilla.org/zh-CN/docs/Web/Javascript/Reference/Global_Objects/Promise）

看完上面兩篇只是先了解一下Fetch的概念，不然后面的內(nèi)容你會是懵逼的狀態(tài)。

網(wǎng)絡(luò)請求結(jié)束后，肯定是少不了數(shù)據(jù)的展示和更新，這時又會涉及到一個很重要的知識點，就是【props】和【state】，RN中所有數(shù)據(jù)的傳遞和控制，都離不開這兩個部分。

所以請務(wù)必在發(fā)起網(wǎng)絡(luò)請求前就要搞懂這兩個內(nèi)容

《React Native知識11-Props(屬性)與State(狀態(tài))》——踏浪帥（http://www.cnblogs.com/wujy/p/5853613.html） 《混合開發(fā)的大趨勢之一React Native Props (屬性)》——王亟亟（http://blog.csdn.net/ddwhan0123/article/details/52238478） 《 混合開發(fā)的大趨勢之一React Native State (狀態(tài))》——王亟亟（http://blog.csdn.net/ddwhan0123/article/details/52240463）

接下來我們就可以開始愉快發(fā)起網(wǎng)絡(luò)請求了，這里可能會用到箭頭函數(shù)，這是ES6里面的語法（類似Android里面的Lambda表達式吧）。如果你是從文章的開始看下來的，那我相信你肯定已經(jīng)看過在文章最開始我推薦的關(guān)于ES6的內(nèi)容了，所以這里也不會有什么問題了

demo相關(guān)代碼在這里（https://github.com/MarnoDev/HelloRN/tree/master/app/02_fetch_demo），如果你已經(jīng)下載了我整個HelloRN的項目，那代碼就在app/02_fetch_demo中。

這里只涉及了簡單的fetch用法，至于一些高級的用法，我們后面再講。 如果看了demo中的代碼還不明白如何進行網(wǎng)絡(luò)請求的，那可以再看一下下面這篇文章。

《React Native網(wǎng)絡(luò)請求及UI展示》——王方帥（http://www.jianshu.com/p/4b3dd4cf8ee2）

（7）三方庫的使用（預(yù)計用時：2~3天）

如果你已經(jīng)看到了這里，說明你已經(jīng)可以成功的發(fā)起網(wǎng)絡(luò)請求，并且展示到了界面上。萬里長征我們這才算是踏出了第一步。為了增強學(xué)習(xí)的成就感，所以我在這里就加了一個關(guān)于三方庫使用的學(xué)習(xí)。

一些成熟的輪子，能更快的幫助我們搭建出一個常用App的原始框架，會讓我們有繼續(xù)學(xué)習(xí)的動力。這里我挑選了幾個比較典型常用的框架進行演示。

1）首先是如何引入或刪除一個node模塊

《如何引入第三方組件》——Tmac50（http://www.jianshu.com/p/4b3dd4cf8ee2） 《如何刪除第三方組件》——我是劉成（http://blog.csdn.net/liu__520/article/details/52801139）（刪除后Android 記得把所有 build 文件夾也刪除，然后重新構(gòu)建）

2）幾個常用框架

tab類

react-native-tab-navigator(使用簡單https://github.com/exponent/react-native-tab-navigator)更適合作為底部的tab，使用方式也超級簡單 react-native-scrollable-tab-view(star最多的tab類控件https://github.com/skv-headless/react-native-scrollable-tab-view)更適合作為頂部的tab，類似今日頭條中的效果。

banner類

react-native-swiper（https://github.com/leecade/react-native-swiper） react-native-banner （這個是基于react-native-swiper的https://github.com/sincethere/react-native-banner）

加入這兩個庫后，我們的demo看起來是不是就有點像一個App了呢？

3）一些綜合框架

當(dāng)然我們也可以選擇一個綜合的框架進行集成使用。demo中我使用了native-base框架。但是該框架在我使用過程中發(fā)現(xiàn)還是有很大局限性，而且還有一些bug。至于UI-Toolkit，按照官方的方式我嘗試了很久并沒有安裝成功，不知道是什么原因，希望有安裝成功的朋友可以回復(fù)一下。

肯定會有人問那我究竟要使用哪一個框架，我覺得最開始入門學(xué)習(xí)的時候，最好都加進來試著使用一下，這樣后面我們才能知道如何去取舍。

NativeBase（https://github.com/GeekyAnts/NativeBase） UI-Toolkit（https://github.com/shoutem/ui） react-native-elements（https://github.com/react-native-community/react-native-elements）

（8）滾動視圖（2~3天）

看完上面三方框架的使用后，我相信你對RN的學(xué)習(xí)又有動力了！那接下來的內(nèi)容會讓我們的Demo更加的像一個App了。現(xiàn)在的App基本都離不開列表數(shù)據(jù)展示，所以接下來的內(nèi)容就讓我們一起學(xué)習(xí)一下滾動視圖的使用。在RN中滾動視圖包含兩部分的內(nèi)容【ScrollView】和【ListView】。

8.1 ScrollView

其實和Android中的ScrollView一樣，如果包含在ScrollView的組件超出屏幕范圍后，就可以對內(nèi)容進行滾動。而且ScrollView可以設(shè)置豎向或者橫向的滾動。還有一些其他屬性，具體可以看下面的內(nèi)容。

ScrollView使用，附《ScrollView屬性大全》——閑得一B（http://www.jianshu.com/p/58301af1dbf2） 附上demo代碼（https://github.com/MarnoDev/HelloRN/blob/master/app/05_scroll_demo/ScrollViewTest.js），對應(yīng)教程demo中的 app/05_scroll_demo/ScrollViewTest.js

8.2 ListView

在RN中的ListView其實是繼承了ScrollView的，這導(dǎo)致目前RN有一個比較頭疼的問題，就是列表的性能問題，不過還好網(wǎng)上有很多關(guān)于RN性能優(yōu)化的文章，但是我建議還是等我們對RN有一定了解以后再看不遲。目前只要知道是有解決方案的就可以了！

附上demo代碼（https://github.com/MarnoDev/HelloRN/blob/master/app/05_scroll_demo/ListViewTest.js），對應(yīng)demo中的app/05_scroll_demo/ListViewTest.js和VideoListItem.js 《React-Native組件用法詳解之ListView》——sidiWang（http://www.jianshu.com/p/1293bb8ac969） 《React Native從網(wǎng)絡(luò)拉取數(shù)據(jù)并填充列表》——共田君（http://www.jianshu.com/p/1c5dc5cd6d97）

大家可以仔細(xì)閱讀一下上面這兩篇文章，然后在結(jié)合demo中的代碼，就一定可以理解這里的內(nèi)容了。

demo中需要注意的地方是，我把listview的item布局抽取成一個單獨的類進行管理的，這里面就會涉及到一些參數(shù)的傳遞，如果看不明白參數(shù)是如何傳遞的，那可以返回去看一下上面關(guān)于【props】和【state】的內(nèi)容。因為后面會大量的用到這些內(nèi)容。

8.3 RefreshControl（下拉刷新）

這里我只講述一下原生下拉刷新RefreshControl的使用，該組件支持Android和iOS，但是在兩個平臺上的呈現(xiàn)方式不太一樣。支持ScrollView和ListView組件的刷新，使用也很簡單，直接看代碼。

講到這里就需要大家特別注意了，RefreshControl刷新結(jié)束后是需要通過setState方法手動更改刷新狀態(tài)的。

所以這里我們就會涉及到另一個概念【狀態(tài)管理器】，相信你自己在嘗試入門RN前就在很多文章中看到過Redux，但是完全不理解這是個什么東西，導(dǎo)致很多人一頭霧水。包括我也是，剛開始就給我說什么Redux我是完全懵逼的。但是學(xué)到這里的時候我終于可以理解了為什么需要這樣一個東西了，因為有太多的【狀態(tài)】需要我們?nèi)ス芾砹恕?/p>

如果完全手動管理，狀態(tài)多了就會很惱火。所以Redux就是一個東西幫助我們更好的管理這些狀態(tài)工具，至于如何使用Redux我們在后面的階段中再去細(xì)說。

附上demo代碼（https://github.com/MarnoDev/HelloRN/blob/master/app/05_scroll_demo/ListViewTest.js），對應(yīng)demo中的app/05_scroll_demo/ListViewTest.js 《RefreshControl屬性大全》——江青青（http://blog.csdn.net/developer_jiangqq/article/details/50672747）

當(dāng)然如果你愿意，也可以找一些三方的組件來使用，進而做到在Android和iOS上的刷新體驗一致。我找到一些可以同時兼容兩個平臺的帶有下拉刷新功能的組件，大家也可以都試一下。至于孰優(yōu)孰劣，我都沒用過，所以不好說，但是附上star數(shù)，至少可以給你一些參考吧。

react-native-pull-to-refresh(https://github.com/moschan/react-native-pull-to-refresh) react-native-gifted-listview(https://github.com/FaridSafi/react-native-gifted-listview) react-native-smart-pull-to-refresh-listview(https://github.com/react-native-component/react-native-smart-pull-to-refresh-listview)

8.4 上拉加載

官方并沒有提供這樣的組件，只能通過自己去實現(xiàn)，照著網(wǎng)上的教程我嘗試了一些方式，但是感覺都不是特別滿意，效果比較生硬。所以這部分內(nèi)容暫時空缺，后面在完善。不過上面在下拉刷新那一節(jié)中提到的react-native-gifted-listview，可以支持上拉加載更多。如果有需要，可以集成該框架進行使用。

（9）第一階段總結(jié)

之所以分階段去寫這篇文章，是想大家都可以循序漸進的系統(tǒng)的去學(xué)習(xí)RN，而且在每個階段都可以有一些成就感。我可以簡短的稱之為【成就感學(xué)習(xí)法】么？不知道有沒有這樣一個詞語，反正我覺得學(xué)習(xí)過程中的成就感是特別重要的。經(jīng)過這個階段的學(xué)習(xí)，如果你對RN還有興趣，再去進行第二階段的學(xué)習(xí) ，如果到現(xiàn)在還是懵逼的狀態(tài)，我勸你要不還是放棄好了，就一門心思的去做好Andorid、iOS 或 Web也是挺好的，嘿嘿~

贊助商