• windows 64位下,React-Native环境搭建详解 (Android)


    React-Native环境搭建需要: 
    1、安装Java JDK 
    2、安装Android Studio 
    3、安装node.js 
    4、安装git 
    5、安装Python 2.x (注意目前不支持Python 3版本) 
    6、安装react-native-cli 
    7、测试环境是否搭建好

    附:React-Native中文网环境搭建链接 https://reactnative.cn/docs/0.46/getting-started.html#content

    一、java Jdk安装,下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html。由于我的系统是64位的,这里选择:jdk-8u131-windows-x64.exe。下载完后,双击jdk-8u131-windows-x64.exe 进行安装。 
    接着配置系统环境,右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”,如图: 
    这里写图片描述 
    点击系统变量的“ 新建”–>输入 JAVA_HOME以及jdk安装路径,如图: 
    这里写图片描述

    在系统变量里找到Path,双击在变量值的最前面加上 %JAVA_HOME%in;后,点击确定。如图: 
    这里写图片描述

    重打开cmd命令,输入 
    java -version 后出现如下图则java环境配置成功: 
    这里写图片描述

    二、由于Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。所以android studio安装,下载地址:https://developer.android.com/studio/index.html

    附android studio安装教程链接:http://www.runoob.com/android/android-studio-install.html

    Android studio安装时,记得要勾选上android sdk,如下图: 
    这里写图片描述

    设置环境变量ANDROID_HOME 与JAVA_HOME配置类似,右击“计算机”–>”属性”–>”更改设置”–>”高级”–>”环境变量”,点击系统变量的“ 新建”–>输入 ANDROID_HOME以及sdk路径,例如:(ANDROID_HOME=> E:Androidsdk)设置环境变量Path:%ANDROID_HOME% ools;%ANDROID_HOME%platform-tools; 
    重打开cmd命令,输入adb 后出现如下图则android 环境配置成功: 
    这里写图片描述

    三、node.js安装,下载地址:https://github.com/coreybutler/nvm-windows/releases 下载 nvm-setup.zip 安装文件。 
    双击这里写图片描述运行安装,安装完后,打开cmd命令窗口,输入nvm -version,出现以下界面,证明nvm安装成功!这里写图片描述

    为了安装node.js安装更快,nvm配置淘宝镜像 
    找到刚才nvm的安装目录下的settings.txt文件,打开在末尾增加 node_mirror: http://npm.taobao.org/mirrors/node/ 
    npm_mirror: https://npm.taobao.org/mirrors/npm/

    这里写图片描述

    然后通过nvm安装对应版本的nodejs,打开cmd命令窗口,运行 
    nvm install latest(安装最新版本) 
    也可以指定版本 nvm install 6.10.0 
    安装完成后会以下界面: 
    这里写图片描述

    四、git安装,如果没有配置git,需要先下载对应的客户端,然后将git加入path环境变量即可. 
    下载地址:https://git-for-windows.github.io/

    五、Python安装 (注意目前不支持Python 3版本) 
    下载地址:https://www.python.org/downloads/release/python-2713/

    下载完后,双击安装 python-2.7.13.amd64.msi,安装完后,配置环境变量,在path的最前面添加python的安装路径,如图: 
    这里写图片描述

    重打开cmd命令,输入python -v 后出现如下图则python 环境配置成功: 
    这里写图片描述

    六、react-native-cli安装(React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。) 
    cmd命令,输入 npm install -g yarn react-native-cli 
    如果成功的话,如下图所示: 
    这里写图片描述

    七、测试React-Native是否搭建好 
    主要下面三个命令初始化react-native项目并运行到android手机上。 
    1、react-native init HelloProject 
    2、cd HelloProject 
    3、react-native run-android

    步骤1 在F盘创建一个名为RN的文件夹用于包含react-native项目,进入目录,按住Shift+鼠标右键,选择在“在此处打开命令窗口(W)”如图: 
    这里写图片描述

    接着输入react-native init HelloProject,初始化react-native项目,运行完后,如果成功会在F盘的RN文件夹生成一个HelloProject项目,如图:

    这里写图片描述

    步骤2 cd HelloProject 进入项目

    步骤3 电脑通过USB连接手机,手机要在设置打开“开发者选项”(不同的手机,打开的方式不同)。然后输入react-native run-android命令,成功的话会出现下图: 
    这里写图片描述 
    这里写图片描述

    同时,手机上会出现,以下界面 
    这里写图片描述

    注意事项: 
    如果运行不能成功,有以下可能: 
    1、要确保以上工具都安装了,并且到加入系统环境变量的Path路径上

    2、存放react-native项目的文件夹名,最好是由字母和下划线组成

    3、查看手机是否连接上电脑,可以用adb devices命令查看是否连接上,如下图: 
    这里写图片描述

    4、项目中的目录下的 android–>build.gradle中 
    compileSdkVersion 23 
    buildToolsVersion “23.0.1” 
    中的版本,android sdk要包含有。 
    查看android sdk build版本,打开android studio,菜单File–>选项 Settings –> Appearance&Behavior –> System Settings –>Android SDK–>SDK Platforms和 SDK Tools,如下图:

    这里写图片描述

    这里写图片描述

    这里写图片描述

    这里写图片描述

    5、检查android 环境变量是否配置好

    6、如果允许出现白屏或者报错,可以通过摇一摇手机或者电脑cmd运行adb shell input keyevent 82命令,调查调试框,如图: 
    这里写图片描述

    接着,点击Dev Settings,如图: 
    这里写图片描述

    然后点击Debug server host & port for device,输入ip和端口,如图: 
    这里写图片描述

    最后,重新运行 react-native run-android 即可。

    附: 
    React-native调试: 
    1、如果android模拟器的话,可以在电脑键盘上的按两下R (reload项目) 
    2、真机调出调试窗口: 
    (1)手机摇一摇 
    (2)手机菜单键(某些手机不行) 
    (3)电脑打开cmd运行 adb shell input keyevent 82 
    3、连接模拟器方式 
    夜神模拟器 adb connect 127.0.0.1:62001 
    逍遥模拟器 adb connect 127.0.0.1:21503

  • 相关阅读:
    我的航拍直升机 控制基站软件的编写历程(2.2)——Qt Creator 版本控制系统
    windows下QT开发环境建立方法
    QT 4.5 windows版本 安装问题 及 Junction 使用
    各种平台下编译qt工程
    华为面试题
    strcpy,strncpy,strlcpy,memcpy
    QT/E 更换字体问题
    Linux设备驱动编程中断处理
    oracle数据库连接池的使用
    Windows下QT的安装
  • 原文地址:https://www.cnblogs.com/cnsanshao/p/8076307.html
Copyright © 2020-2023  润新知