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所以没有遇到问题。如果遇到别的问题 大家可用去中文网的论坛里面的问答专区.有一个新手必读 很有帮助的。

 最后,希望这点补充让大家少走点弯路。