帶你從零學ReactNative開發跨平臺App開發（一）

時間 2019-11-10

標籤 reactnative 開發跨平臺 app 简体版

原文原文鏈接

ReactNative跨平臺開發系列教程：html

帶你從零學ReactNative開發跨平臺App開發（一）前端

帶你從零學ReactNative開發跨平臺App開發（二）node

帶你從零學ReactNative開發跨平臺App開發（三）react

帶你從零學ReactNative開發跨平臺App開發（四）android

帶你從零學ReactNative開發跨平臺App開發（五）git

帶你從零學ReactNative開發跨平臺App開發（六）程序員

帶你從零學ReactNative開發跨平臺App開發（七）github
hot：更多>>

貼一個交流羣的二維碼，歡迎加入：算法

首先自我介紹一下，本人鳥窩，如今就任於xx共享汽車，擔任主程，目前用的技術棧是.net core+angular。npm

今天我講的是關於ReactNative從零基礎開發，但願能夠對入門的新手，起到一個指導做用。

目前學習React Native跨平臺開發的人員比較多，幹ReactNative開發的程序員，轉行過來的也比較多，以前就有遇到過，好比：幹前端的，幹Android/IOS的，幹後臺的（C#,Go,Java...PHP）,發現一個頗有趣的現象，我公司同事幹PHP的，一次偶然，我發現他盡然學起了RN，好了，廢話很少說，只是想告訴你們，RN開發App效果也不錯。

接下來就開始了...大家準備好了嗎！！！

一，首先檢查環境，ReactNative（一下簡稱：RN）開發，必要環境。

等等，在這裏我必須強調，RN開發有兩種模式，一是原生Android/IOS混合起來的開發（這種開發目前在國內，從事的比較多），二是CRNA（create react native app）模式開發，也就是利用腳手架生產項目模板。【國內市場對CRNA的介紹很少，我這裏先簡單的介紹一下CRNA 入門，後續仍是講原生Android/IOS混合這種模式】暫時先不介紹CRNA模式開發，等國內市場成熟再說不遲。

工具準備：

1，進入http://nodejs.cnnodejs中文網，下載與自身環境相一致的nodejs安裝包

2，安裝包下載以後，雙擊進行安裝

win平臺的同窗注意，安裝過程當中要關閉殺毒軟件和各類安全工具

3，安裝完成以後，打開命令行工具，檢查是否安裝成功，執行以下命令：
$ node -v
該命令執行結果爲當前node版本，筆者當前版本爲：

4，檢查NPM是否安裝成功，

npm 是Node包管理工具，以後須要使用它來安裝其餘node程序包

在在命令行中輸入以下命令：
$ npm -v
該命令執行結果爲：
3.10.10
Yarn

Yarn是Facebook出品的一個依賴包管理工具，起做用和npm同樣。但Yarn具備更多好用的特性：

Yarn 會緩存它下載的每一個包，因此不須要重複下載。它還能並行化操做以最大化資源利用率，因此安裝速度之快史無前例

Yarn 在每一個安裝包的代碼執行前使用校驗碼驗證包的完整性。

Yarn 使用一個格式詳盡但簡潔的 lockfile 和一個精確的算法來安裝，可以保證在一個系統上的運行的安裝過程也會以一樣的方式運行在其餘系統上

網絡適應單個請求失敗不會致使安裝失敗，請求失敗時會重試

安裝yarn

訪問Yarn官網，下載響應平臺的安裝包，進行安裝

使用Yarn

安裝好以後，其餘工具會自動使用Yarn進行加速。

固然安裝以前，你能夠先檢查一下，你本身是否已經安裝過Yarn，若是出現下圖的模式，說明已經安裝過了。
yarn -v 看一下當前版本
安裝create-react-native-app命令行工具

create-react-native-app是一個綜合建立ReactNative工程，而且不須要配置的工具，它極大的簡化了入門開發的流程。具體的內容，你們能夠進入其github.com的主頁進行瀏覽。

安裝create-react-native-app須要使用npm進行，在任意目錄下，輸入以下命令，即可以在該目錄下建立一個ReactNative工程。

注意，若是沒有安裝crna命令行工具的話，直接運行該命令會報這樣的錯：

因此咱們要先安裝命令行工具，也叫腳手架。

因爲npm 服務器在境外，加上網速慢的緣由，這個加載起來會很滿，你們稍安勿燥。

如圖所示，安裝完成，我今天網速好像有點快啊，安裝了30s。

建立ReactNative工程

ReactNative工程的模板須要經過create-react-native-app工具進行建立。建立方法以下：

1，經過命令行進入存放ReactNative工程的文件夾。

2，在該文件夾下執行以下命令：
$ create-react-native-app myapp
myapp爲工程名，能夠更換爲其餘字符，但必須小寫

安裝過程須要1-5分鐘不等，如想提高安裝速度，能夠安裝yarn，詳情見yarn官網

下面爲筆者安裝成功截圖：

這個過程比較漫長 是真的漫長啊，我等了有10分種。這個過程你不要懷疑時間，真的是這樣的。

若是在這個過程當中，你等的不耐煩，能夠先下載咱們的必備工具:1.模擬器，這裏我推薦夜神模擬器。2.Expo ，這是一個能夠直接裝在手機上或者模擬器裏，用來測試項目用的。

模擬器都會安裝吧，安裝好模擬器，咱們配置一下參數：

爲了減小咱們的內存開銷，咱們把配置調的低一點。內存大的土豪無所謂！

運行預覽工程

1，工程建立完成以後，即可以啓動工程，開始開發和調試。

啓動工程，首先要使用命令行工具進入工程更目錄，而後運行以下指令
$ yarn start
工程啓動以後，會生成一個二維碼和一個本地連接，經過此此二維碼或本地連接，即可預覽工程運行效果。

這就是表明着你的項目已經跑起來了，如何看效果呢？那就看英文字符，提示：想預覽你的app加載出來是什麼吊樣，那麼就用expo app的掃碼工具掃一掃吧，你就能夠看見你的項目運行起來是什麼吊樣了！

expo是什麼，如何找到expo並安裝expo呢？去expo官網 https://expo.io 好多人反應官網上下載expo有問題，而且也有人加我找我要，這裏若是大家有問題的話，能夠直接訪問下面我給出的expo下載連接，直接下載！

按 a 打開該項目在android 或模擬器上開發設備上

按 q 展現二維碼

按 r 從新加載資源包

按R 從新加載資源包，並清楚緩存

好了，下面我給你們提供一點資料：

2，啓動工程以後，須要在手機端安裝Expo App，使用Expo App對所開發的ReactNative App進行預覽運行。

安裝ExpoApp的方法以下：

iOS平臺：在AppStore中搜索Expo client，如圖

Android平臺下，訪問此連接：http://expo.io/--/api/v2/versions/download-android-apk 下載安裝包並安裝，安裝過程當中須要給此App所有權限。

3，Expo App在手機端安裝完成以後，打開ExpoApp，經過其掃描二維碼的功能，掃描生成的二維碼，即可以在App內預覽開發中的App工程

4，新建工程的運行效果爲：

注意：expo上看你開發的app效果有兩種途徑：1.手機上直接掃碼就能夠了 2.複製exp://xxxx.xx.xx.xx那個連接，到project上收索該地址，能夠看到項目，如圖

在IDE中編寫代碼，查看效果！

熟話說，工欲善其事，必先利其器，這裏我推薦你們用 vs code編輯器敲代碼，效果是很是爽的！

找到咱們剛纔建立的項目，有vs code打開它，而且編寫代碼！

在我修改了內容以後，app的內容也發生了變化！

用vs code寫rn的話，我在推薦你們安裝幾個插件，安裝插件的目的是爲了更加高效的開發

好了，到這一步，咱們的app就算是跑起來了，若是你耐心的和我學到了這裏，那麼恭喜你，你很牛逼，由於我第一搞這個的時候，搞了兩天，仍是一臉矇蔽！

後續文章持續更新，敬請期待！

文章爲做者原創，轉載請註明出處。