給全部開發者的React Native詳細入門指南（第一階段）

時間  2019-11-05
標籤 全部 開發者 react native 詳細 入門 指南 第一 階段 欄目 職業生涯 简体版
原文   原文鏈接
  • 本文爲 Marno 原創，轉載必須保留出處！
  • 公衆號【 aMarno 】，關注後回覆 RN 加入交流羣
  • React Native 優秀開源項目大全：www.marno.cn

建議先下載好資料後，再閱讀本文。demo代碼和資料下載javascript

目錄

1、前言

從最開始開始接觸React Native（如下簡稱RN），到寫下第一篇博文後，就再也沒有寫過相關的文章了，隨着微信小程序的正式發佈，其實也又一次將一個概念推到公衆面前，那就是全棧式前端，這是個什麼概念呢？大概意思就是一我的能夠同時寫Android,iOS,Web程序。可能民間不乏一些大神Java，OC，Swift，JS都寫得特別好，但我相信大部分人仍是和我同樣，畢業後只從事一個方向的開發，因此要成爲全棧式前端有比較大的困難。可是隨着發RN布，這一切彷佛變得有了可能。這也是隨着社會進步不斷要求生產力提升後致使的必然發展趨勢。雖然這個概念早在RN前就有了，可是之因此能在這個時間火起來，那就說明時候到了。像手機上的指紋識別同樣，並非蘋果第一個集成到手機上，但倒是蘋果把它用在了最正確的時代。如今連幾百元的手機都有指紋識別了。因此若是去年你沒有去關注去學習RN 沒關係，可是隨着微信發佈小程序，這再次說明了全棧式前端是一個趨勢，若是你尚未趁機上車，那……那其實也沒啥，一門心思寫好Android其實也是能夠的，畢竟專才也是要有的！哈哈～前面說的有點危言聳聽了，但仍是但願那些學有餘力、熱愛並關注前端開發的人能早點搭上這趟車。雖然目前RN還有不少問題，好比首當其衝的就是性能問題，可是隨着版本的不斷迭代，我相信這個問題早晚會被解決的。你問我那是何時？如今RN版本是0.40，會不會是1.0發佈的時候呢？哈哈～這個誰能知道呢，可是有生之年確定會的！說了這麼多，讓咱們正式發車吧！html

2、回答一些問題

  • 爲何寫此教程

    首先主要是出於咱們公司業務發展上的要求，而且我對RN開發很感興趣，由於它確實能夠提升生產力，因此公司就指派我負責此次RN在公司移動端內部的推行。其次是苦於網上雖然關於RN資料不少，可是卻沒有一個比較系統的學習方案，看視頻課程又以爲效率過低，這也致使我在學習RN的過程當中浪費了大量的時間去搜集資料。因此我想寫一篇文章記錄一下個人學習過程，將我從零開始的入門學習心得和你們分享一下。目的就是爲了讓更多想學RN的人，不用再東奔西走的把時間浪費在蒐集資料，可以快速的入門進行學習。前端

  • 本文適合哪些人看？

    1.熱愛前端開發，而且總想開發一些能看得見的東西
    2.對RN有着像對女友同樣的興趣，願意去了解他
    3.能夠不懂Web開發，但最好有必定Android或者IOS開發經驗。
    4.對RN徹底不瞭解的新人（若是是RN老司機不巧看到了這篇文章，我想說...哥，收徒麼？我骨骼精奇，是個碼代碼的好手...哥....誒....別走啊....我還跪着呢！）java

  • 如何使用本教程？

    看！多看！反覆看！ 敲！多敲！反覆敲！
    嘿嘿~說正經的，必需要結合我給出的Demo中的代碼一塊兒看。並且我會附上我在學習過程當中梳理的思惟導圖文件，能夠結合起來和文章一塊兒看，這樣學習的思路會更加清晰一些。node

  • 須要先學習JavaScript，HTML，CSS麼？

    HTML和CSS沒什麼要求，略懂就行，不懂也無所謂。可是JS仍是要懂一點（臥槽，「一點」是多少？就和菜譜裏的鹽少量同樣難以琢磨）。好吧，我再說詳細一點。把阮一峯老師的《ECMAScript 6 入門》這篇關於ES6的文檔花一週時間詳細看一下其實就差很少了。至於JS裏涉及的一些其餘特性，閉包什麼的，後面入門了再研究也能夠。包括ES7關於網絡請求寫法的變化，咱們也能夠先不用管。react

  • 如何編寫demoandroid

    是否是咱們編寫每個知識點的demo都要經過 【react-native init XXXX】的方式去新建一個項目呢？固然不是，咱們能夠把全部代碼都寫到一個demo裏，並經過分包進行管理（app的文件夾是本身建立的，名字自定），這樣本身看起來也比較方便。而後每一個demo都經過import的方式導入到index.android/ios.js文件中進行使用。
    ios

  • 保不保證學習效果？git

    怎麼不問我包不包就業呢？es6

3、第一階段《相識》（預計用時：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

配置Live Templates

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佈局沒有練熟，仍是不要看後面的了，因此請多花點時間在這裏，甚至能夠本身找一些比較有難度佈局進行練習。

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中全部數據的傳遞和控制，都離不開這兩個部分。因此請務必在發起網絡請求前就要搞懂這兩個內容

接下來咱們就能夠開始愉快發起網絡請求了，這裏可能會用到箭頭函數，這是ES6裏面的語法（相似Android裏面的Lambda表達式吧）。若是你是從文章的開始看下來的，那我相信你確定已經看過在文章最開始我推薦的關於ES6的內容了，因此這裏也不會有什麼問題了

7.三方庫的使用（預計用時：2~3天）

若是你已經看到了這裏，說明你已經能夠成功的發起網絡請求，而且展現到了界面上。萬里長征咱們這纔算是踏出了第一步。爲了加強學習的成就感，因此我在這裏就加了一個關於三方庫使用的學習。一些成熟的輪子，能更快的幫助咱們搭建出一個經常使用App的原始框架，會讓咱們有繼續學習的動力。這裏我挑選了幾個比較典型經常使用的框架進行演示。

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

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能夠設置豎向或者橫向的滾動。還有一些其餘屬性，具體能夠看下面的內容。

8.2 ListView

在RN中的ListView實際上是繼承了ScrollView的，這致使目前RN有一個比較頭疼的問題，就是列表的性能問題，不過還好網上有不少關於RN性能優化的文章，可是我建議仍是等咱們對RN有必定了解之後再看不遲。目前只要知道是有解決方案的就能夠了！

8.3 RefreshControl（下拉刷新）

這裏我只講述一下原生下拉刷新RefreshControl的使用，該組件支持Android和iOS，可是在兩個平臺上的呈現方式不太同樣。支持ScrollView和ListView組件的刷新，使用也很簡單，直接看代碼。
講到這裏就須要你們特別注意了，RefreshControl刷新結束後是須要經過setState方法手動更改刷新狀態的。因此這裏咱們就會涉及到另外一個概念【狀態管理器】，相信你本身在嘗試入門RN前就在不少文章中看到過Redux，可是徹底不理解這是個什麼東西，致使不少人一頭霧水。包括我也是，剛開始就給我說什麼Redux我是徹底懵逼的。可是學到這裏的時候我終於能夠理解了爲何須要這樣一個東西了，由於有太多的【狀態】須要咱們去管理了。若是徹底手動管理，狀態多了就會很惱火。因此Redux就是一個東西幫助咱們更好的管理這些狀態工具，至於如何使用Redux咱們在後面的階段中再去細說。

固然若是你願意，也能夠找一些三方的組件來使用，進而作到在Android和iOS上的刷新體驗一致。我找到一些能夠同時兼容兩個平臺的帶有下拉刷新功能的組件，你們也能夠都試一下。至於孰優孰劣，我都沒用過，因此很差說，可是附上star數，至少能夠給你一些參考吧。

8.4 上拉加載

官方並無提供這樣的組件，只能經過本身去實現，照着網上的教程我嘗試了一些方式，可是感受都不是特別滿意，效果比較生硬。因此這部份內容暫時空缺，後面在完善。不過上面在下拉刷新那一節中提到的react-native-gifted-listview，能夠支持上拉加載更多。若是有須要，能夠集成該框架進行使用。

9.總結

之因此分階段去寫這篇文章，是想你們均可以按部就班的系統的去學習RN，並且在每一個階段均可以有一些成就感。我能夠簡短的稱之爲【成就感學習法】麼？不知道有沒有這樣一個詞語，反正我以爲學習過程當中的成就感是特別重要的。通過這個階段的學習，若是你對RN還有興趣，再去進行第二階段的學習 ，若是到如今仍是懵逼的狀態，我勸你要不仍是放棄好了，就一門心思的去作好Andorid、iOS 或 Web也是挺好的，嘿嘿~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程