首先自我介紹一下，本人鳥窩，現在就職於xx共用汽車，擔任主程，目前用的技術棧是.net core+angular。 今天我講的是關於ReactNative從零基礎開發，希望可以對入門的新手，起到一個指導作用。 目前學習React Native跨平臺開發的人員比較多，乾ReactNative開發的程式 ...
首先自我介紹一下，本人鳥窩，現在就職於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就算是跑起來了，如果你耐心的和我學到了這裡，那麼恭喜你，你很牛逼，因為我第一搞這個的時候，搞了兩天，還是一臉矇蔽！
後續文章持續更新，敬請期待！
文章為作者原創，轉載請註明出處。
