1. 程式人生 > >ReactNative環境搭建與初始化專案

ReactNative環境搭建與初始化專案

RN自2015年出了以後,受到很多人的關注。通過一次編寫多處使用的優勢,在app的開發中使用的也越來越頻繁,雖然現在看來相容性和運行了流暢度還不及原生開發,但是在廣大工程獅的努力下,RN以後的發展前景還是十分看好。本篇給大家介紹RN的環境搭建。
執行平臺:win8 64位

第一步:官網上建議安裝Chocolatey,這個是一個包管理軟體,作用就是同過安裝之後執行相應命令就可以下載你需要的外掛。但是作用不大,直接忽略就好直接安裝Python 2目前不支援python3。

第三步:npm install -g yarn react-native-cli下載rn的客戶端。

因為我是android的開發,所以我就用不到第四步了,但是要是你沒有安裝android的sdk api 系統圖片資源的話還要有第四步。

第四步:下載android的Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。下載方式有兩種,第一種:直接去google下載。第二種;使用studio的sdkManager下載。下載完之後想要在cmd中直接使用還要配置一下tools和platform-tools的環境變數。

這樣幾步就把rn需要的都搭建好了。是不是很簡單?沒錯,就是這麼簡單。總結一下就是rn中元件需要node.js和python的庫來做支援,在android執行時又需要android的sdk和模擬器,所以我們依次下載了對應的開發包。

下載完畢之後,我們可以測試執行一下:

react-native init AwesomeProject
cd AwesomeProject
react-native run-android
這個命令的意思就是使用rn客戶端初始化了一個叫AwesomeProject 的專案,進入專案目錄後,在android平臺執行。為確保package可以正常執行,我們可以先執行react-native start 開啟package。然後在執行react-native run-android。專案建立之後的結構是這樣的:

這裡寫圖片描述

其中的index.android.js就是android專案引入的js檔案,在打包的時候,也會根據這個js檔案將需要的其他js檔案全部打包為bundle。node_moudels這個檔案是根據package.json這個檔案載入的包,在初始化專案的時候如不指定rn版本,package.json中預設採用的是最新版本0.39。

“dependencies”: {
“react”: “~15.4.0-rc.4”,
“react-native”: “0.39.0”
},
最新的0.39版本還步穩定,建議在初始化的時候時候選擇0.38.0的版本。android檔案就是一個完整的整合了rn的工程,要是有studio可以直接執行,要是沒安裝studio也沒關係,在第四步的時候我們安裝了android的sdk與模擬器,可以直接使用adb install命令來安裝。