ReactNative跨平台開發系列教程：
hot：更多>>
貼一個交流群的二維碼，歡迎加入：
首先自我介紹一下，本人鳥窩，現在就職於xx共享汽車，擔任主程，目前用的技術棧是.net core+angular。
今天我講的是關於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.10Yarn
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 myappmyapp為工程名，可以更換為其他字符，但必須小寫
安裝過程需要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就算是跑起來了，如果你耐心的和我學到了這里，那么恭喜你，你很牛逼，因為我第一搞這個的時候，搞了兩天，還是一臉蒙蔽！
后續文章持續更新，敬請期待！
文章為作者原創，轉載請注明出處。
