一、搭建ReactNative环境
首先安装node.js和python2.xx版本,不要装python3.xx,这个官方是特别说明的,请注意.NodeJs官方下载:https://nodejs.org/en/download/,这里可以选择不同系统的版本,介于操作系统环境的问题,我本篇讲解在win10下安装node.js和python
安装nodejs,一路默认即可,nodejs安装程序会自动加入到环境变量;python安装的时候第2步要注意,“Add python.exe to Path”这一栏,点击下拉框并选择“Entire feature will be installed on local hard drive”,如下图:
打开cmd,执行
如出现下图证明配置成功
二、安装React Native:
通过npm安装,首先执行如下命令
npm install -g react-native-cli
当然我们还需要Android的开发环境,我这里就不做介绍了。安装完成以后我们就可以开始开发项目了,先建一个ReactNative Project,工程名称AwesomeProject
react-native init AwesomeProject
以上命令会在前目录建立一个工程名为AwesomeProject的project,进入工程目录,工程目录结构如下图:
cd AwesomeProject
这里有个问题,大家注意下,为了提高Android的编译效率,我们要修改Gradle Damo,打开android目录,找到gradle.properties文件,向其中添加如下代码:
org.gradle.daemon=true
org.gradle.parallel=true
org.gradle.jvmargs=-Xmx1024m
最后执行如下命令,系统就开始编译工程了:
react-native run-android
出现下图说明编译成功,这里记得要启动一个模拟器或usb连上真机,我这里是直接连接真机的.
react-native会自动安装apk到你手机里面,其实就是调用adb命令安装咯,但这个时候还没办法运行,系统会提示如下错误:
解决以上问题,执行以下操作即可:
( 1 ) Android5.0以上,首先用usb连接真机,执行:
adb reverse tcp:8081 tcp:8081
这条命令是将手机访问服务器的端口指向8081,这里只适用于android 5.0以上.
( 2 ) Android 5.0以下:
首先保证手机连接的wifi网络和PC在同一网段下,其次打开应用程序,点击menu菜单或摇动手机,这时会出现如下界面:
( 2.1) 点击Dev Settings选项:
( 2.2 ) 然后点击Debug server host & port for device这一栏,
在上面填入你的PC的IP地址(cmd执行:ifconfig命令),然后在其中填上ip地址和端口号,react native的默认端口是8081: ( 如果不适用默认的端口号, 可以加上port, 例如: 192.168.1.139:port:8082)
[注意] 192.168.1.139:port:8082 ( 这里的分号是英文格式的, 中文分号有可能编译不通过喔)
( 2.3 ) 最后我们执行如下命令,开启服务器,保证app可访问服务器:
npm start
( 2.4 ) 出现上面的页面,代表服务器开启成功,这时我们再打开app,点击menu菜单,弹出页面上选择Reload,第一次Reload可能要等待的久一点,最终会出现如下界面则代表app安装并运行成功了.