Mac用户哭晕在厕所之react native 搭android开发环境踩的坑

 

敲黑板看重点,需要的软件:

1.Node

2.React-Native-cli

3.WebStorm or Sublime(官方推荐的JavaScript IDE)

4.JDK

5.Android_SDK

6.AndroidStudio

并且需要配置JAVA_HOME,ANDROID_HOME的环境变量;

 

一、安装node(5.0或更高版本)

  下载方式1.通过终端敲命令下载:

brew install node

  下载方式2.官网下载安装包:https://nodejs.org/en/

可以通过 node -v 的命令来查看node是否安装成功,查看到版本号就是成功了

安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

 

二:安装react-native-cli

Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

npm install -g yarn react-native-cli

安装完yarn后同理也要设置镜像源:

yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

可以通过 react-native -v 的命令来查看react-native-cli是否安装好,查看到版本号就是成功了

    然而我在执行npm install -g yarn react-native-cli 命令的时候就开始飘红,

摆渡install -save 缺的react后接着报错,其实这个时候不用管他,因为it is a warnning not a error,查看版本号他会告诉你该怎么做

卸载再下就好了

 

 三、安装webstorm

下载软件最好的地址就是官网了,下载地址  选择好系统版本以后点击DOWNLOAD

四、安装JDK

访问Oracle官网http://www.oracle.com,浏览到首页的底部菜单找到java下载,也可以直接在下面这个地址下载别人上传的 下载地址

下载完成后安装JDK

配置java环境变量:

在命令行中输入

$ /usr/libexec/java_home

来定位java在mac中的安装路径

export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home  //查找到的java安装路径
export PATH=$JAVA_HOME/bin:$PATH
export CLASS_PATH=$JAVA_HOME/lib:$CLASS_PATH

验证环境变量是否成功:在命令行输入:

$ java 或  $javac

若提示命令找不到表示失败) 或输入

 $ echo $JAVA_HOME

(看是否能成功打印java的安装路径)

 

 五、安装Android_SDK

 下载地址

 

六、安装AndroidStudio

下载地址

配置环境变量

export ANDROID_HOME=查找到到sdk路径
export PATH=${PATH}:${ANDROID_HOME}/tools  
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

在命令行中输入:

adb version 

(验证android sdk环境变量是否设置成功)

 

七、创建RN项目

进入你希望创建项目的目录后,输入react-native init 项目名称

比如:

react-native init TinyBin

这个项目初始化很慢,需要等待很长时间

注意:初始的android工程中的gradle等配置需要修改成自己本地拥有的,否则还会重新去联网下载

在gradle官网下载gradle,解压安装;

gradle配置环境变量

export GRADLE_HOME=/Users/jolene/Downloads/gradle-2.14.1

export PATH=$PATH:$GRADLE_HOME/bin

执行gradle -v确定安装成功;

 

成功后进入项目目录,开始运行项目

cd /Users/jolene/TinyBin
 react-native run-android

 React-Native服务在编写过程中要一直开着,如果不小心把它关了,可以在终端输入:npm start 来重新开启服务。

 

八:处理运行报错

如果运行到真机上可能会报错,确保手机与编译环境在同一Wi-Fi环境下(IP段相同),

Mac下联入android真机可能看不到真机;

在命令行中输入:

adb devices

查看联入的设备

这个时候需要配置,以我连的魅族手机为例;

在根目录下输入命令:

system_profiler SPUSBDataType

在命令行输入

cd .android

adb kill-server

这里就是连接设备成功,进入项目目录,重新run-android,在手机出现hello world就是运行成功了

 

 

 

 

 

 

posted on 2017-08-04 11:57  邓娇林  阅读(255)  评论(2编辑  收藏  举报

导航