建議先下載好資料後，再閱讀本文。demo代碼和資料下載
目錄
一、前言
從最開始開始接觸React Native（以下簡稱RN），到寫下第一篇博文後，就再也沒有寫過相關的文章了，隨着微信小程序的正式發佈，其實也又一次將一個概念推到公衆面前，那就是全棧式前端，這是個什麼概念呢？大概意思就是一個人可以同時寫Android,iOS,Web程序。可能民間不乏一些大神Java，OC，Swift，JS都寫得特別好，但我相信大部分人還是和我一樣，畢業後只從事一個方向的開發，所以要成爲全棧式前端有比較大的困難。但是隨着發RN布，這一切似乎變得有了可能。這也是隨着社會進步不斷要求生產力提高後導致的必然發展趨勢。雖然這個概念早在RN前就有了，但是之所以能在這個時間火起來，那就說明時候到了。像手機上的指紋識別一樣，並不是蘋果第一個集成到手機上，但卻是蘋果把它用在了最正確的時代。現在連幾百元的手機都有指紋識別了。所以如果去年你沒有去關注去學習RN 不要緊，但是隨着微信發佈小程序，這再次說明了全棧式前端是一個趨勢，如果你還沒有趁機上車，那……那其實也沒啥，一門心思寫好Android其實也是可以的，畢竟專才也是要有的！哈哈～前面說的有點危言聳聽了，但還是希望那些學有餘力、熱愛並關注前端開發的人能早點搭上這趟車。雖然目前RN還有很多問題，比如首當其衝的就是性能問題，但是隨着版本的不斷迭代，我相信這個問題遲早會被解決的。你問我那是什麼時候？現在RN版本是0.40，會不會是1.0發佈的時候呢？哈哈～這個誰能知道呢，但是有生之年肯定會的！說了這麼多，讓我們正式發車吧！
二、回答一些問題
- 爲什麼寫此教程
首先主要是出於我們公司業務發展上的要求，並且我對RN開發很感興趣，因爲它確實可以提高生產力，所以公司就指派我負責這次RN在公司移動端內部的推行。其次是苦於網上雖然關於RN資料很多，但是卻沒有一個比較系統的學習方案，看視頻課程又覺得效率太低，這也導致我在學習RN的過程中浪費了大量的時間去搜集資料。所以我想寫一篇文章記錄一下我的學習過程，將我從零開始的入門學習心得和大家分享一下。目的就是爲了讓更多想學RN的人，不用再東奔西走的把時間浪費在蒐集資料，能夠快速的入門進行學習。
- 本文適合哪些人看？
1.熱愛前端開發，並且總想開發一些能看得見的東西
2.對RN有着像對女朋友一樣的興趣，願意去了解他
3.可以不懂Web開發，但最好有一定Android或者IOS開發經驗。
4.對RN完全不瞭解的新人（如果是RN老司機不巧看到了這篇文章，我想說...哥，收徒麼？我骨骼精奇，是個碼代碼的好手...哥....誒....別走啊....我還跪着呢！） - 如何使用本教程？
看！多看！反覆看！ 敲！多敲！反覆敲！
嘿嘿~說正經的，必須要結合我給出的Demo中的代碼一起看。而且我會附上我在學習過程中梳理的思維導圖文件，可以結合起來和文章一起看，這樣學習的思路會更加清晰一些。 - 需要先學習JavaScript，HTML，CSS麼？
HTML和CSS沒什麼要求，略懂就行，不懂也無所謂。但是JS還是要懂一點（臥槽，“一點”是多少？就和菜譜裏的鹽少許一樣難以琢磨）。好吧，我再說詳細一點。把阮一峯老師的《ECMAScript 6 入門》這篇關於ES6的文檔花一週時間詳細看一下其實就差不多了。至於JS裏涉及的一些其他特性，閉包什麼的，後面入門了再研究也可以。包括ES7關於網絡請求寫法的變化，我們也可以先不用管。
-
如何編寫demo
是不是我們編寫每一個知識點的demo都要通過 【react-native init XXXX】的方式去新建一個項目呢？當然不是，我們可以把所有代碼都寫到一個demo裏，並通過分包進行管理（app的文件夾是自己創建的，名字自定），這樣自己看起來也比較方便。然後每個demo都通過import的方式導入到index.android/ios.js文件中進行使用。
![]()
-
保不保證學習效果？
怎麼不問我包不包就業呢？
三、第一階段《相識》（預計用時：9.5~14.5天）
1.內容簡介
1.1）本教程共分爲三個階段，第一階段主要是帶大家入門，熟悉一些RN基礎組件、JS語法等等。該階段結束後，基本可以搭建一個App框架了，甚至可以寫一些簡單的新聞類App，在該階段的教程中我仿寫的是【開眼v3.1.2】。
1.2）本文中有大量的內容來自各家博客，所以出於對原文作者的尊重，我會直接給出原文鏈接並附上作者名字，如果看到對應的章節，請大家跳轉到相應的網址去看一下。現在網上關於RN的文章太多，看的眼花繚亂結果卻往往不容易形成體系，所以我只整理了一些必須的內容，而且相關的內容看我推薦這幾篇文章基本也就夠了。
1.3）在開始第一階段的學習前，先來看一下完成這個階段的學習後，我們大概能做出一個什麼效果來。希望藉此也能給你一些學習的動力吧！上圖（被壓縮太厲害了，湊合看吧）！
2.環境搭建（預計用時：1~2天）
按照RN中文社區的指導就可以了。不過過程中會遇到一些坑，我也附上我的踩坑記錄。我建議大家可以先看一下踩坑記錄，然後再開始安裝環境。
2.1） 環境搭建踩坑指南:《一起學》安卓React Native開發--踩坑大全（持續更新...）
2.2）環境搭建中文教程，點擊跳轉RN中文社區
2.3）開發工具安裝和配置 :
本文中使用WebStorm進行開發，也有人用Atom或Sublime，對此我想說：趕快換WebStrom吧。爲了不牽扯什麼不必要的問題，下載地址我就不貼了，自行破*解吧。我最多隻能說一下我用的是下面這個版本的。
安裝好WebStorm後，爲了更便捷的去開發，我們需要安裝一些插件，以及進行一些常用配置。比如RN組件庫的安裝，添加一些常用的Live Templates等，下圖是我添加的兩個比較常用的，給大家參考一下，至於如何添加Live Template大家可以自行百度一下，比較簡單，我就不過多贅述了。
《[React Native]去掉WebStorm中黃色警告》——於連林520wcf
3.Hello World（預計用時：0.5天）
不教大家寫 Hello World 的教程,不是好教程！千萬注意！【要看註釋】哈！不然會很坑！
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello World!</Text>
);
}
}
// 注意，這裏用引號括起來的'HelloWorldApp'必須和你 init 時創建的項目名一致
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);4.瞭解 index.android/ios.js
index.android.js 和 index.ios.js 分別作爲Android手機和iOS手機上程序開始的入口，所以我們先來了解一下這個文件的結構。
1）組件導入區： 所有用到的組件都需要事先進行導入，包括樣式也需要進行導入
2）核心代碼區：所有邏輯代碼編寫的地方
3）組件樣式區：render()方法中用到的組件的樣式，可以集中在這裏編寫
4）註冊啓動組件：組件只有註冊後才能運行。這裏用到的AppRegistry也需要在組件導入區進行導入
5.Flex佈局（預計用時：2~3天）
Flex佈局是Web開發必備的技能，如果你是Web開發人員，可以直接跳過該部分內容。但是也需要注意的是Web中的一些屬性在RN中是沒有的，而且屬性命名是通過小駝峯的方式進行命名的。後面我會附上我自己整理的關於RN組件支持的屬性大全。可能不完善，但是常用的應該是有了。如果Flex佈局沒有練熟，還是不要看後面的了，所以請多花點時間在這裏，甚至可以自己找一些比較有難度佈局進行練習。
- 《Flex 佈局教程：語法篇》——阮一峯
- 《Flex 佈局教程：實例篇》——阮一峯
- 《React-Native的基本控件屬性方法》——冬瓜小生
- 我也整理了一份Excel表，方便用到的時候快速查閱
- demo相關代碼在這裏，如果你已經下載了我整個HelloRN的項目，那代碼就在app/01_flex_demo中
6.網絡請求（fetch）（預計用時：2~3天）
1.如果Flex佈局你已經練習的比較熟練了，那我們來學習一下網絡請求。其實現在的App大多都比較簡單，無非就是佈局的展示，網絡數據的獲取等等。如果搞定這兩塊內容，那我們至少會從RN的學習中獲取一些成就感了，也纔有繼續下去的動力。
2.這裏要說明的是，如果你是Android或iOS工程師，那你需要習慣一下RN處理Json數據的方式（或者說Web處理Json的方式），我們通過網絡請求回來的Json Object數據就可以直接進行操作，而不像Native開發，還需要通過什麼額外的工具去進行Json的轉換。這也是Web開發比較方便的地方。無論Json Object轉Json字符串，還是Json字符串轉Json Object，都是非常方便的。如果非要把網絡數據進行本地存儲，那也很方便，通過解構賦值，直接就可以賦值給你創建的Model了。
看完上面兩篇只是先了解一下Fetch的概念，不然後面的內容你會是懵逼的狀態。
網絡請求結束後，肯定是少不了數據的展示和更新，這時又會涉及到一個很重要的知識點，就是【props】和【state】，RN中所有數據的傳遞和控制，都離不開這兩個部分。所以請務必在發起網絡請求前就要搞懂這兩個內容
- 《React Native知識11-Props(屬性)與State(狀態)》——踏浪帥
- 《混合開發的大趨勢之一React Native Props (屬性)》——王亟亟
- 《 混合開發的大趨勢之一React Native State (狀態)》——王亟亟
接下來我們就可以開始愉快發起網絡請求了，這裏可能會用到箭頭函數，這是ES6裏面的語法（類似Android裏面的Lambda表達式吧）。如果你是從文章的開始看下來的，那我相信你肯定已經看過在文章最開始我推薦的關於ES6的內容了，所以這裏也不會有什麼問題了
- demo相關代碼在這裏，如果你已經下載了我整個HelloRN的項目，那代碼就在app/02_fetch_demo中。
這裏只涉及了簡單的fetch用法，至於一些高級的用法，我們後面再講。
如果看了demo中的代碼還不明白如何進行網絡請求的，那可以再看一下下面這篇文章。 - 《React Native網絡請求及UI展示》——王方帥
7.三方庫的使用（預計用時：2~3天）
如果你已經看到了這裏，說明你已經可以成功的發起網絡請求，並且展示到了界面上。萬里長征我們這纔算是踏出了第一步。爲了增強學習的成就感，所以我在這裏就加了一個關於三方庫使用的學習。一些成熟的輪子，能更快的幫助我們搭建出一個常用App的原始框架，會讓我們有繼續學習的動力。這裏我挑選了幾個比較典型常用的框架進行演示。
1）首先是如何引入或刪除一個node模塊
- 《如何引入第三方組件》——Tmac50
- 《如何刪除第三方組件》——我是劉成（刪除後Android 記得把所有 build 文件夾也刪除，然後重新構建）
2）幾個常用框架
tab類
- react-native-tab-navigator(使用簡單)更適合作爲底部的tab，使用方式也超級簡單
- react-native-scrollable-tab-view(star最多的tab類控件)更適合作爲頂部的tab，類似今日頭條中的效果
教程的demo中只提供了react-native-tab-navigator的代碼【戳這裏】，如果你已經下載了我整個HelloRN的項目，那代碼就在app/eyepetizer_demo/MainPage.js中。不過我也使用過一些其他的，而且還試了很多種，具體可以看一下我demo中的package.json就知道了。不過還是這個最易用。相對穩定一些
banner類
- react-native-swiper
- react-native-banner （這個是基於react-native-swiper的）
demo中使用的是react-native-banner【戳這裏】，使用比較簡單。如果你已經下載了我整個HelloRN的項目，那代碼就在app/03_library_demo/BannerTest.js。中並不是因爲swpier怎麼樣，而是我先找到banner，後面就懶得換了。目測swiper可以實現的功能就比較多了，比如引導頁之類的，而且使用人數也更多，大家可以嘗試一下swiper。
加入這兩個庫後，我們的demo看起來是不是就有點像一個App了呢？
3）一些綜合框架
當然我們也可以選擇一個綜合的框架進行集成使用。demo中我使用了native-base框架。但是該框架在我使用過程中發現還是有很大侷限性，而且還有一些bug。至於UI-Toolkit，按照官方的方式我嘗試了很久並沒有安裝成功，不知道是什麼原因，希望有安裝成功的朋友可以回覆一下。肯定會有人問那我究竟要使用哪一個框架，我覺得最開始入門學習的時候，最好都加進來試着使用一下，這樣後面我們才能知道如何去取捨。
8.滾動視圖（2~3天）
看完上面三方框架的使用後，我相信你對RN的學習又有動力了！那接下來的內容會讓我們的Demo更加的像一個App了。現在的App基本都離不開列表數據展示，所以接下來的內容就讓我們一起學習一下滾動視圖的使用。在RN中滾動視圖包含兩部分的內容【ScrollView】和【ListView】。
8.1 ScrollView
其實和Android中的ScrollView一樣，如果包含在ScrollView的組件超出屏幕範圍後，就可以對內容進行滾動。而且ScrollView可以設置豎向或者橫向的滾動。還有一些其他屬性，具體可以看下面的內容。
- ScrollView使用，附《ScrollView屬性大全》——閒得一B
- 附上demo代碼【戳我】，對應教程demo中的 app/05_scroll_demo/ScrollViewTest.js
8.2 ListView
在RN中的ListView其實是繼承了ScrollView的，這導致目前RN有一個比較頭疼的問題，就是列表的性能問題，不過還好網上有很多關於RN性能優化的文章，但是我建議還是等我們對RN有一定了解以後再看不遲。目前只要知道是有解決方案的就可以了！
- 附上demo代碼【戳我】，對應demo中的app/05_scroll_demo/ListViewTest.js和VideoListItem.js
- 《React-Native組件用法詳解之ListView》——sidiWang
- 《React Native從網絡拉取數據並填充列表》——共田君
大家可以仔細閱讀一下上面這兩篇文章，然後在結合demo中的代碼，就一定可以理解這裏的內容了。demo中需要注意的地方是，我把listview的item佈局抽取成一個單獨的類進行管理的，這裏面就會涉及到一些參數的傳遞，如果看不明白參數是如何傳遞的，那可以返回去看一下上面關於【props】和【state】的內容。因爲後面會大量的用到這些內容。
8.3 RefreshControl（下拉刷新）
這裏我只講述一下原生下拉刷新RefreshControl的使用，該組件支持Android和iOS，但是在兩個平臺上的呈現方式不太一樣。支持ScrollView和ListView組件的刷新，使用也很簡單，直接看代碼。
講到這裏就需要大家特別注意了，RefreshControl刷新結束後是需要通過setState方法手動更改刷新狀態的。所以這裏我們就會涉及到另一個概念【狀態管理器】，相信你自己在嘗試入門RN前就在很多文章中看到過Redux，但是完全不理解這是個什麼東西，導致很多人一頭霧水。包括我也是，剛開始就給我說什麼Redux我是完全懵逼的。但是學到這裏的時候我終於可以理解了爲什麼需要這樣一個東西了，因爲有太多的【狀態】需要我們去管理了。如果完全手動管理，狀態多了就會很惱火。所以Redux就是一個東西幫助我們更好的管理這些狀態工具，至於如何使用Redux我們在後面的階段中再去細說。
- 附上demo代碼【戳我】，對應demo中的app/05_scroll_demo/ListViewTest.js
- 《RefreshControl屬性大全》——江青青
當然如果你願意，也可以找一些三方的組件來使用，進而做到在Android和iOS上的刷新體驗一致。我找到一些可以同時兼容兩個平臺的帶有下拉刷新功能的組件，大家也可以都試一下。至於孰優孰劣，我都沒用過，所以不好說，但是附上star數，至少可以給你一些參考吧。
- react-native-pull-to-refresh(目前star 57)
- react-native-gifted-listview(目前star 808)
- react-native-smart-pull-to-refresh-listview(目前star 57)
8.4 上拉加載
官方並沒有提供這樣的組件，只能通過自己去實現，照着網上的教程我嘗試了一些方式，但是感覺都不是特別滿意，效果比較生硬。所以這部分內容暫時空缺，後面在完善。不過上面在下拉刷新那一節中提到的react-native-gifted-listview，可以支持上拉加載更多。如果有需要，可以集成該框架進行使用。
9.總結
之所以分階段去寫這篇文章，是想大家都可以循序漸進的系統的去學習RN，而且在每個階段都可以有一些成就感。我可以簡短的稱之爲【成就感學習法】麼？不知道有沒有這樣一個詞語，反正我覺得學習過程中的成就感是特別重要的。經過這個階段的學習，如果你對RN還有興趣，再去進行第二階段的學習 ，如果到現在還是懵逼的狀態，我勸你要不還是放棄好了，就一門心思的去做好Andorid、iOS 或 Web也是挺好的，嘿嘿~
