React Native 安装配置

一、搭建ReactNative环境

首先安装node.js和python2.xx版本,不要装python3.xx,这个官方是特别说明的,请注意.NodeJs官方下载:https://nodejs.org/en/download/,这里可以选择不同系统的版本,介于操作系统环境的问题,我本篇讲解在win10下安装node.js和python

React Native 安装配置_第1张图片
Python官方下载:https://www.python.org/downloads/,再次提醒2.xx版本

React Native 安装配置_第2张图片

安装nodejs,一路默认即可,nodejs安装程序会自动加入到环境变量;python安装的时候第2步要注意,“Add python.exe to Path”这一栏,点击下拉框并选择“Entire feature will be installed on local hard drive”,如下图:

React Native 安装配置_第3张图片

打开cmd,执行

如出现下图证明配置成功

React Native 安装配置_第4张图片

二、安装React Native:

通过npm安装,首先执行如下命令

  npm install -g react-native-cli

当然我们还需要Android的开发环境,我这里就不做介绍了。安装完成以后我们就可以开始开发项目了,先建一个ReactNative Project,工程名称AwesomeProject

react-native init AwesomeProject

以上命令会在前目录建立一个工程名为AwesomeProject的project,进入工程目录,工程目录结构如下图:

cd AwesomeProject

React Native 安装配置_第5张图片

这里有个问题,大家注意下,为了提高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 安装配置_第6张图片

react-native会自动安装apk到你手机里面,其实就是调用adb命令安装咯,但这个时候还没办法运行,系统会提示如下错误:

React Native 安装配置_第7张图片

解决以上问题,执行以下操作即可:

( 1 )  Android5.0以上,首先用usb连接真机,执行:

    adb reverse tcp:8081 tcp:8081

这条命令是将手机访问服务器的端口指向8081,这里只适用于android 5.0以上.

(  2 ) Android 5.0以下:

首先保证手机连接的wifi网络和PC在同一网段下,其次打开应用程序,点击menu菜单或摇动手机,这时会出现如下界面:

React Native 安装配置_第8张图片

( 2.1)  点击Dev Settings选项:

React Native 安装配置_第9张图片

( 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 ( 这里的分号是英文格式的, 中文分号有可能编译不通过喔)

React Native 安装配置_第10张图片

( 2.3 ) 最后我们执行如下命令,开启服务器,保证app可访问服务器:

        npm start


React Native 安装配置_第11张图片

( 2.4 )  出现上面的页面,代表服务器开启成功,这时我们再打开app,点击menu菜单,弹出页面上选择Reload,第一次Reload可能要等待的久一点,最终会出现如下界面则代表app安装并运行成功了.

React Native 安装配置_第12张图片
React Native 安装配置_第13张图片
我的QQ号,欢迎交流~

你可能感兴趣的:(React Native 安装配置)