react-native環境搭建

1.前言

    react-natvie中文網地址:https://reactnative.cn/   現在前端的開發環境基本都需要先搭建環境.react-natvie環境搭建跟着官網的文檔流程走就行了。但是有些是沒有必要的。

2.搭建環境

2.1選擇平台

    

 

    這里需要注意的就是windows的電腦只能開發android的混合app.mac電腦 ios和android都能開發。

2.2依賴

    官網提示必須安裝的依賴有Node(高於8.3版本) 、Python2(必須為 2.x)  JDK(必須為1.8)

     node官網:https://nodejs.org

     python2官網:https://www.python.org

     jdk官網:http://www.oracle.com/technetwork/java/javase/downloads/index.html

    這些依賴的安裝網上有很多教程。我這里就不復制粘貼了。

2.3安裝腳手架

npm install -g yarn react-native-cli                             //安裝腳手架
yarn config set registry https://registry.npm.taobao.org --global //yarn是Facebook公司替代npm的工具 這里是設置國內的的鏡像源。
yarn config set disturl https://npm.taobao.org/dist --global

 安裝完畢后:

 這里顯示的版本是穩定的版本(可用的)現在安裝腳手架最新的react-native版本為0.56.0 用最新版生成的react-native會報錯: Unable to resolve module 'AccessibilityInfo' 所以使用上圖顯示的版本就沒有問題了。

 2.4android環境

1. 安裝 Android Studio

   這個網站講的不要太詳細了,這里不廢話了

2.安裝和配置完成android studio 就可用創建項目了

react-native init AwesomeProject
react-native init MyApp --version 0.55.4 //這個是創建指定版本的項目,可用解決accessibilityinfo問題

3.模擬器

  Genymotion(針對個人有免費的版本) 官網地址:https://www.genymotion.com/ 這個最好開啟vpn  因為實在是太卡了 下載的時候會中斷很多次。。。

4.運行項目

  

cd AwesomeProject  //進入項目目錄
react-native run-android  //運行項目(前提是要把模擬器打開啊) 這個是在命令行運行項目的方式 還有一種就是直接在編譯軟件里打開(webstrom等等)

 5.其他

 1.用webstrom可用直接創建react-native的項目(前提是環境已經搭建好)這里有一個問題就是webstrom自動創建的項目是最新版本的所以可能會有問題 比如上面的Unable to resolve module 'AccessibilityInfo' 這個可用修改項目下的package.json文件

{
  "name": "myReactNative",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.4.1",
    "react-native": "0.55.4"//修改這里版本號
  },
  "devDependencies": {
    "babel-jest": "23.4.2",
    "babel-preset-react-native": "5",
    "jest": "23.5.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

 然后界面會提示一個yarn install 之類的彈窗 重新安裝就好了

 我用的版本是0.55.4所以沒有遇到問題。如果遇到別的問題 大家可用去中文網的論壇里面的問答專區.有一個新手必讀 很有幫助的。

 最后,希望這點補充讓大家少走點彎路。