react native 在window 7上配置开发环境-Andorid

参照官方配置:https://facebook.github.io/react-native/docs/getting-started.html

因为在配置的过程中遇到很多问题,在此记录一下。

1.java的jdk 下载(http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

配置jdk的环境变量

a.打开我的电脑--属性--高级--环境变量

新建系统变量JAVA_HOME 和CLASSPATH

变量名:JAVA_HOME

变量值:C:\Program Files\Java\jdk1.7.0

变量名:CLASSPATH

变量值:.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;

b.选择“系统变量”中变量名为“Path”的环境变量,双击该变量,把JDK安装路径中bin目录的绝对路径,添加到Path变量的值中,并使用半角的分号和已有的路径进行分隔。

变量名:Path

变量值:%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;

c.这是java的环境配置,配置完成后直接启动eclipse,它会自动完成java环境的配置

d.配置ANDROID_HOME (安卓sdk本机位置)

变量名:ANDROID_HOME

变量值:C:\Users\xxx\AppData\Local\Android\sdk 

4. 设置完后,重新打开一个新的命令提示符,运行java -version就可以了~  (一定要重新打开一个新的命令提示符

2.安装react-native的命令行工具

npm install -g react-native-cli

3.通过react-native --help 查看它所支持的所有命令

 
react native 在window 7上配置开发环境-Andorid
 

3.安装安卓开发工具AndroidStudio:(安卓的开发工具里面内置安卓模拟器)

去google提供的国内官网下载:https://developers.google.cn

 
react native 在window 7上配置开发环境-Andorid
 

打开安卓的中文页面:点击获取Android Studio 再点下载即可:

 
react native 在window 7上配置开发环境-Andorid
 

安装包下载完成之后 安装应用程序即可。

 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 

android studio 安装完成之后,配置SDK Manager

 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 

最后点AMD Manager 新建安卓模拟器:

 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
安卓模拟器已经有了 

4.使用react-native init 初始化一个react-native的项目

例如:react-native init reactNativeApp

5.运行react-native项目:(注:windows机器不能运行ios)

首先打开一个安卓模拟器或者一个已经连接到电脑的安卓真机

react-native run-android (ctrl + m reload 刷新项目)

 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 

6.最后调试react-native项目,这里只是讲安卓模拟器的调试方法

在模拟器里,ctrl+m 调出操作键

 
react native 在window 7上配置开发环境-Andorid
 

reload 刷新或者按两次R键刷新,debug js remotely 在chrome里调试

7.在组件中发起fetch请求,如果没有发起请求或者请求没反应,估计是模拟器没有联网的原因,将模拟器的dns配置成pc机器的ip,然后重启模拟器即可解决。

 
react native 在window 7上配置开发环境-Andorid
 
 
react native 在window 7上配置开发环境-Andorid
 

然后输入:getprop 查看系统当前的各项属性,得到模拟器的DNS地址,如下:

[net.dns1]: [10.0.2.3]

重新设置为pc的ip地址:命令行如下:

setprop net.dns1 10.200.121.79

 
react native 在window 7上配置开发环境-Andorid
 

如此就能上网了:

 
react native 在window 7上配置开发环境-Andorid
 

发起一段fetch请求:

 
react native 在window 7上配置开发环境-Andorid
 

拿到数据

 
react native 在window 7上配置开发环境-Andorid

作者:梦想成真213
链接:https://www.jianshu.com/p/2232d0c973e2
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

上一篇:SpringBoot + Dubbo + zookeeper 搭建简单分布式服务


下一篇:GJM : Unity3D HIAR -【 快速入门 】 二、搭建开发环境