参照官方配置: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 FilesJavajdk1.7.0
变量名:CLASSPATH
变量值:.;%JAVA_HOME%libdt.jar;%JAVA_HOME%lib ools.jar;
b.选择“系统变量”中变量名为“Path”的环境变量,双击该变量,把JDK安装路径中bin目录的绝对路径,添加到Path变量的值中,并使用半角的分号和已有的路径进行分隔。
变量名:Path
变量值:%JAVA_HOME%in;%JAVA_HOME%jrein;
c.这是java的环境配置,配置完成后直接启动eclipse,它会自动完成java环境的配置
d.配置ANDROID_HOME (安卓sdk本机位置)
变量名:ANDROID_HOME
变量值:C:UsersxxxAppDataLocalAndroidsdk
4. 设置完后,重新打开一个新的命令提示符,运行java -version就可以了~ (一定要重新打开一个新的命令提示符)
2.安装react-native的命令行工具
npm install -g react-native-cli
3.通过react-native --help 查看它所支持的所有命令
![](http://upload-images.jianshu.io/upload_images/5541401-73c91cdc3dee85e2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/651/format/webp)
3.安装安卓开发工具AndroidStudio:(安卓的开发工具里面内置安卓模拟器)
去google提供的国内官网下载:https://developers.google.cn
![](http://upload-images.jianshu.io/upload_images/5541401-9830adbb6cfbfb22.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
打开安卓的中文页面:点击获取Android Studio 再点下载即可:
![](http://upload-images.jianshu.io/upload_images/5541401-963d80147425b065.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
安装包下载完成之后 安装应用程序即可。
![](http://upload-images.jianshu.io/upload_images/5541401-33ce9bac2cc4e864.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/516/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-de28d5979712b5da.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/504/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-1c5277d2d4642ee2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/418/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-7787ef149b4a3c96.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/422/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-9e67218ac2b2268b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/429/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-c28a2ebc193aa6f2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/938/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-016cb4b9f070a1d8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/428/format/webp)
android studio 安装完成之后,配置SDK Manager
![](http://upload-images.jianshu.io/upload_images/5541401-3fe483d507bec433.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1000/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-21c12dcf309568e3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/796/format/webp)
最后点AMD Manager 新建安卓模拟器:
![](http://upload-images.jianshu.io/upload_images/5541401-ced4cd9b0c126bcf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/837/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-090d4b76d1862a8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/454/format/webp)
4.使用react-native init 初始化一个react-native的项目
例如:react-native init reactNativeApp
5.运行react-native项目:(注:windows机器不能运行ios)
首先打开一个安卓模拟器或者一个已经连接到电脑的安卓真机
react-native run-android (ctrl + m reload 刷新项目)
![](http://upload-images.jianshu.io/upload_images/5541401-e97f8bb1694ccead.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/697/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-245af8fe41b795af.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/561/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-2c944893857cd2c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/488/format/webp)
6.最后调试react-native项目,这里只是讲安卓模拟器的调试方法
在模拟器里,ctrl+m 调出操作键
![](http://upload-images.jianshu.io/upload_images/5541401-4cafaf3269e7c051.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/376/format/webp)
reload 刷新或者按两次R键刷新,debug js remotely 在chrome里调试
7.在组件中发起fetch请求,如果没有发起请求或者请求没反应,估计是模拟器没有联网的原因,将模拟器的dns配置成pc机器的ip,然后重启模拟器即可解决。
![](http://upload-images.jianshu.io/upload_images/5541401-f4a10122391d27c6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/654/format/webp)
![](http://upload-images.jianshu.io/upload_images/5541401-6e04ccd87a4fe381.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/317/format/webp)
然后输入:getprop 查看系统当前的各项属性,得到模拟器的DNS地址,如下:
[net.dns1]: [10.0.2.3]
重新设置为pc的ip地址:命令行如下:
setprop net.dns1 10.200.121.79
![](http://upload-images.jianshu.io/upload_images/5541401-4c80a783a306c751.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/453/format/webp)
如此就能上网了:
![](http://upload-images.jianshu.io/upload_images/5541401-f918634dada54c61.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/469/format/webp)
发起一段fetch请求:
![](http://upload-images.jianshu.io/upload_images/5541401-d8a4223c072aacfc.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/646/format/webp)
拿到数据
![](http://upload-images.jianshu.io/upload_images/5541401-8d7b493407f370e1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/516/format/webp)
作者:梦想成真213
链接:https://www.jianshu.com/p/2232d0c973e2
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。