React Native 入門（三） - 給 Android 開發者的學習建議

當前 RN 版本：0.48
操作環境：Windows 10

前言

最近大概學習了一個月的 React Native 了，算是有了不少的收穫。一開始覺得很難，但是程式碼敲多了，覺得入門還是很簡單的。由於我是一名 Android 開發者，所以我就站在自己的角度，給想接觸 React Native 的 Android 開發者一些建議。

學習建議

需要用到的知識點

• JavaScript
• ES6
• JSX
• React
• FlexBox

看到這麼多知識點，你可能覺得很難。不要擔心，以上這些，我之前也都沒接觸過。一開始我打算先看它們的語法，看了兩天果斷放棄了，開始跟著視訊 coding 。

不會 js ？沒有關係。Keeping coding，程式碼敲多了，你會發現它和 Java 很相似，而且比 Java 更簡潔，上手會很快。沒聽過 JSX ？也沒有關係。它不過是在 js 裡面嵌入了 XML ，作為 Android 開發者，XML 總該懂吧。不會 React ？當然也沒有關係。不過是用到了一些語法，coding 多了，自然也就瞭解了。而 FlexBox 就更簡單了，個人感覺，比 XML 佈局還要簡單一些。說了這麼多，總結一點就是 Keeping Coding，不要被你沒接觸過的東西嚇到。

推薦視訊

• （免費）React Native 零基礎入門到專案實戰

這也是我看的第一個視訊，第一部分介紹 React，第二部分介紹 React Native，看完這兩個部分就可以了。不過由於視訊是用 ES5 語法寫的，寫的過程中我也遇到了很多坑，不過最後都一一解決了，還是很有成就感的。第三部分屬於專案實戰，我選擇了忽略，而是去看了下面推薦的 GitHub 專案實戰視訊。

• （免費）React Native 基礎與入門

這也是我看的第二個視訊，用 ES6 語法講解 React Native 的基礎，也是通過這個視訊，讓我解決了上面留下的坑。視訊質量很高，可以說是上一個視訊的補充和鞏固。

• （付費）React Native 開發跨平臺 GitHub App

這是第二個視訊作者推出的一個付費視訊，我目前正在學習這個，大概學習了一半，收穫很多，成就感滿滿。不過比較遺憾的是價錢有些稍貴了。另外值得吐槽的一點，作者總是偷偷地改程式碼，經常會在下一個視訊發現程式碼有改動，而且作者不會說明，所以有時候會導致不少問題，雖然自己也能解決，但不免浪費了不少時間。

這裡提個醒，以上三個視訊都用到了 Navigator 這個元件，由於這個元件已經被官方拋棄了，所以要自行安裝：

yarn add react-native-deprecated-custom-components

然後在檔案中匯入：

import { Navigator } from 'react-native-deprecated-custom-components'

這樣才能使用這個元件。匯入的時候大括號一定要加上，我一開始沒有加大括號，導致專案報錯，浪費了好多時間。關於為什麼要加上大括號，學習的過程中你就會明白了。

• （付費）React Native + Redux 實戰寶典視訊課程

這個視訊我還沒有看，但是看了下目錄，感覺還是不錯的。講到了 Redux，據說是個很厲害的東西。並且基於當前最新的 0.48 版本，很不錯，還有就是價格實惠。我打算寫過 GitHub 的專案就來學習這個，一方面鞏固基礎，另一方面擴充知識。

相關網站

• React Native 中文網

元件、api 文件等都可以在這裡找到，討論區也比較友好，我的第一個坑就是在這裡解決的。

• JavaScript 指南

js 的 api 文件，coding 中用到 js 的各種方法等，可以到這裡來檢視。這個網站給我的第一印象是，好看！

• ECMAScript 6 入門

ES6 的語法，即便你能寫了，可能也不太理解，可以到這裡檢視。通讀一遍沒有什麼意義，用到了再來看。

• React 教程

東西不是很多，看上面的第一個視訊也就足夠了。

• FlexBox 彈性盒子

FlexBox 的詳細介紹，當然了，React Native 中文網裡面也有相關介紹。

• React Native 研究與實踐

第三個視訊作者總結的相關學習資料，還有他自己寫的部落格，推薦一下。

鞏固與提升

寫完了一兩個專案，就要鞏固基礎，差缺補漏，只有基礎紮實了，才有提升的資本。而提升的方法就是多學多練，見得多了，收穫的自然也就多了。

總結

對於 Android 開發者來說，React Native 的入門還是比較容易的。但是要熟練的掌握和使用，就要 Keep Learning & Keep Coding。

文章同步自 CSDN：http://blog.csdn.net/qq_24867873/article/details/78134473