ReactNative编译到运行的坑

一、搭建ReactNative环境
  • 首先安装node.js和python2.xx版本,不要装python3.xx,这个官方是特别说明的,请注意.
    NodeJs官方下载:https://nodejs.org/en/download/,这里可以选择不同系统的版本,介于操作系统环境的问题,我本篇讲解在win10下安装node.js和python
    NodeJs
    Python官方下载:https://www.python.org/downloads/,再次提醒2.xx版本
    Python2.7
  • 安装nodejs,一路默认即可,nodejs安装程序会自动加入到环境变量;python安装的时候第2步要注意,“Add python.exe to Path”这一栏,点击下拉框并选择“Entire feature will be installed on local hard drive”,如下图:

    打开cmd,执行

    1
    >python

    如出现下图证明配置成功

  • 此时,还是只能通过”python .py”运行python脚本,若希望直接运行.py,只需再修改另一个环境变量PATHEXT:

    1
    PATHEXT=PATHEXT;.PY;.PYM

好了,到此我们的安装环境已经搭建好,下面我们开始安装react native.


二、安装React Native
  • 通过npm安装,首先执行如下命令
  • 1
    npm install -g react-native-cli

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

    1
    react-native init AwesomeProject

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

    1
    cd AwesomeProject


    这里有个问题,大家注意下,为了提高Android的编译效率,我们要修改Gradle Damo,打开android目录,找到gradle.properties文件,向其中添加如下代码:

    1
    2
    3
    org.gradle.daemon=true
    org.gradle.parallel=true
    org.gradle.jvmargs=-Xmx1024m

    最后执行如下命令,系统就开始编译工程了

    1
    react-native run-android

    出现下图说明编译成功,这里记得要启动一个模拟器或usb连上真机,我这里是直接连接真机的.

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

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

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

    1
    adb reverse tcp:8081 tcp:8081

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

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

    点击Dev Settings选项

    然后点击Debug server host & port for device这一栏,
    在上面填入你的PC的IP地址(cmd执行:ifconfig命令),然后在其中填上ip地址和端口号,react native的默认端口是8081

  • 最后我们执行如下命令,开启服务器,保证app可访问服务器
    1
    npm start


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

王洋 wechat
我的微信号,欢迎交流~

热评文章