React-Native学习环境搭建_react native 环境搭建windows-CSDN博客

本文链接：https://blog.csdn.net/wol965/article/details/79377836

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

1、安装Java JD

首先从Java官网下载JDK并且安装，接下来要配置JAVA_HOME环境变量。可以根据java -version来检测一下，jdk最好是1.8以上。

2、安装Android Studio

React Native目前需要Android Studio2.0或更高版本。

Android Studio需要Java Development Kit [JDK] 1.8（暂不支持更高版本）。你可以在命令行中输入 javac -version来查看你当前安装的JDK版本。如果版本不合要求，则可以到官网上下载。或是使用包管理器来安装（比如choco install jdk8或是apt-get install default-jdk）

Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。

除非特别注明，请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository，而这也是React Native必须的（否则在react-native run-android时会报appcompat-v7包找不到的错误）。

确定所有安装都勾选了，尤其是Android SDK和Android Device Emulator。
在初步安装完成后，选择Custom安装项：

custom installation

检查已安装的组件，尤其是模拟器和HAXM加速驱动。

verify installs

安装完成后，在Android Studio的欢迎界面中选择Configure | SDK Manager。

configure sdk

在SDK Platforms窗口中，选择Show Package Details，然后在Android 6.0 (Marshmallow)中勾选Google APIs、Android SDK Platform 23、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image。

platforms

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1（必须包含有这个版本。当然如果其他插件需要其他版本，你可以同时安装其他多个版本）。然后还要勾选最底部的Android Support Repository.

build tools

你可以把Android SDK的tools和platform-tools目录添加到PATH变量中，以便在终端中运行一些Android工具，例如android avd或是adb logcat等。

3、安装node.js

这货是基于js的，node.js轻量级的Web服务器，想要是React Native跑起来需要安装node，如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本

下载地址：https://nodejs.org/en/

下载node.js，找好对应的版本，然后去安装就可以了。我安装的是4.4.4版本，你们也可以安装其他的

大家可以通过node -v的命令来测试NodeJS是否安装成功

4、安装git

安装React-native需要用到git，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可

下载地址：https://git-for-windows.github.io/

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

下载完后，双击安装 python-2.7.13.amd64.msi，安装完后，配置环境变量,在path里添加python的安装路径。

重打开cmd命令，输入python -v 后出现如下图则python 环境配置成功：

这里写图片描述

6、react-native-cli安装

React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务（packager）等任务。

cmd命令，输入 npm install -g yarn react-native-cli

如果成功的话，如下图所示：

这里写图片描述

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

3、react-native run-android

步骤1 在你的磁盘创建一个名为RN的文件夹用于包含react-native项目，进入目录，按住Shift+鼠标右键，选择在“在此处打开命令窗口（W）”; 接着输入react-native init HelloReact，初始化react-native项目，运行完后，如果成功会在你的磁盘的RN文件夹生成一个HelloReact项目

步骤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