正文

windows版本搭建安装reactnative环境配置及相关问题

achenxy  achenxy  2022-08-09  264

关键词：

此文档整理参考地址：

http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/

http://android-mirror.bugly.qq.com:8080/include/usage.html

1、安装Java

这里需要注意对环境变量的设置，可以根据java -version来检测一下。

Android Studio需要Java Development Kit [JDK] 1.8或更高版本。如已装jdk且小于1.8的，先卸载再重新装jdk1.8：控制面板->卸载程序->将Java开头的两个文件卸载就可以重新安装了。参考文档：http://jingyan.baidu.com/article/d169e186afd233436611d828.html

2、设置SDK

到AndroidDevTools下载SDK tools，红框内任意一个，一般是选择第一个

下载地址：http://www.androiddevtools.cn/

注：安装时保存安装路径（配置环境变量用）

A、打开Android SDK Manager

选中以下项目：
Tools/Android SDK Tools (24.3.3)
Tools/Android SDK Platform-tools (22)
Tools/Android SDK Build-tools (23.0.1)（这个必须版本严格匹配23.0.1）
Android 6.0 (API 23)/SDK Platform (1)
Extras/Android Support Library(23.0.1)
Extras/Android Support Repository

注：Extrasz中如果没有子菜单：将腾讯推荐的镜像地址：https://dl.google.com/android/repository/ 加入到SDK Manager-->Tools-->Manager Add-on Sizes-->User Defined Sites-->new，加入后再Packages-->reload，Extrasz就会有信息了

B、设置代理

点击Tools--options设置代理，填写镜像地址及端口，这里用的是腾讯Bugly的镜像，另请务必选择: Force https://... sources to be fetched using http://...

C、检查代理是否正常工作

点击菜单Package>Reload，如果能获取新版本，表明可以正常访问镜像

D、选择包进行安装

选择Install packages，弹出以下窗口，选中Accept License-->Install

正在安装。。。

安装后的目录：

点击SDK Manager.exe运行，会报如下错误：

Failed to execute tools\android.bat;

解决方法：

进入sdk manager.exe文件所在的位置，该目录下的temp文件夹下有个tools_rXX.X.X-windows.zip文件(XX.X.X代表版本号)。解压zip文件到android-sdk\tools文件夹下。

重新打开sdk manager.exe，显示如下：

3、配置SDK环境变量

安装会产生sdk安装路径，如：C:\Users\admin\AppData\Local\Android\android-sdk

这里需要注意设置环境变量ANDROID_HOME：Android SDK Manager的位置例如：（ANDROID_HOME=> E:\Android\sdk）设置环境变量PATH：例如：（PATH=> C:\Users\admin\AppData\Local\Android\android-sdk\tools;C:\Users\admin\AppData\Local\Android\android-sdk\platform-tools）

4、安装node.js

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

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

下载node.js，找好对应的版本，然后去安装就可以了。

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

5、安装git

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

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

安装后将git添加到环境变量：

git 目录下的 bin（如 C:\Program Files (x86)\Git\bin ）添加到 PATH 环境变量。

选择 PATH——编辑，将 bin 的路径（ C:\Program Files (x86)\Git\bin ）添加到变量值后面

6、安装react-native命令行工具react-native-cli

git配置完成后可以clone React-native-cli了，建议大家到将react-native-cli克隆到某个盘，不要在c盘直接clone

1) 在D盘中创建react_native_workspace目录：md react_native_workspace

2) 在命令行中进入你希望RN安装的目录：cd react_native_workspace

3) 输入git clone https://github.com/facebook/react-native.git，等待下载

clone成功后：

3) 进入刚刚目录下的react-native目录下的react-native-cli目录，输入npm install -g

安装好之后，可以命令行下就有react-native命令了

7、创建RN项目

进入你希望创建项目的目录后，输入react-native init AwesomeProject，等待一段时间（较慢）

成功后：

目录结构：

8、运行Package

在命令行中进入项目目录，输入react-native start，等待一段时间：

这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了。

9、运行项目

刚刚运行package的命令行不要关闭，重新启动一个新的命令行，进入项目目录，输入react-native run-android

注：此处下载需要科学上网

等待运行(如果是第一次运行，首先会下载gradle，时间较长)，运行成功后出现下图

第一次手机肯定报错

这时候我们摇一摇手机，点击Dev Settings后，点击Debug server host & port for device,设置IP和端口

摇一摇”这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单。

这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081

置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！

相关问题：

1、执行react-native run-android报错：No connected devices！

打开安装好的模拟器，并启动设备

2、安装模拟器：Genymotion，点击add没有设备的问题：

一般登录之后就会有device显示，如果登录不进去，从以下三个地方检查

1、使用Oracle VM VirtualBox管理器创建一个虚拟电脑(不用再里面装系统，相关信息配置好就行)，并打开启动，参考：

http://jingyan.baidu.com/article/8ebacdf02a5c3649f65cd5f0.html

2、中文路径问题，参考：http://blog.csdn.net/zxd0328/article/details/43601301

3、打开Settings-->Network-->选择Use HTTP Proxy，填写代理服务网络（先打开科学上网）

4、更新电脑显卡

主要从上面四个方面检查，以上都做了，如果还是不行，检查在Genymotion中注册的账户是否已激活，另外多登陆几次，看到下面的黑色一直再滚动，说明就可以了

3、Genymotion启动device后显示白屏：

很可能是显卡驱动有问题，用驱动人生或者驱动精灵更新显卡驱动就可以了：

4、执行react-native run-android报错：Timeout getting device list

解决方法：将安装好的sdk路径添加到这

windows版本搭建安装reactnative环境配置

安装Java(配置JAVA_HOME)这里需要注意对环境变量的设置，可以根据java-version来检测一下。安装SDK(配置ANDROID_HOME)这里需要注意设置环境变量ANDROID_HOME：AndroidSDKManager的位置例如：（ANDROID_HOME=>E:Androidsdk）设置环境变量PATH：例如：... 查看详情

windows下的reactnative的环境搭建

...QAQ 一、开发环境搭建要求　　在Windows操作系统搭建ReactNative开发环境要求在电脑上安装好JDK,AndroidSDK,还要求电脑上安装有一套C++编译器，如果没有，推荐安装微软的VIsualStudioCommunity2015 二、环境搭建　　1、安装JDK（需安... 查看详情

windows版本搭建安装reactnative环境配置及相关问题

http://www.cnblogs.com/aichenxy/p/5971613.html此文档整理参考地址：http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8 查看详情

windows版本搭建安装reactnative环境配置及相关问题

此文档整理参考地址：http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89%88%E6%9C%AC%E6%90%AD%E5%BB%BA%E5%AE%89%E8%A3%85react-native%E7%8E%AF%E5%A2%83%E9%85%8D%E7%BD%AE/http://android 查看详情

史上最详细windows版本搭建安装reactnative环境配置转载，比官网的靠谱亲测可用

史上最详细Windows版本搭建安装ReactNative环境配置 2016/01/29 | ReactNative技术文章 | Sky丶清| 95条评论 | 33530views编辑推荐：稀土掘金是一个高质量的技术社区，从 ReactN 查看详情

react-native学习笔记--史上最详细windows版本搭建安装reactnative环境配置

参考：http://www.lcode.org/react-native/Reactnative中文网：http://reactnative.cn/docs/0.23/android-setup.html#content1、安装Jdk（最好默认安装路径尽量别改）http://jingyan.baidu.com/article/a24b33cd59b58e19fe002bb9.htmlhttp:// 查看详情

最详细的windows版本搭建安装reactnative环境配置

最详细的Windows版本搭建安装ReactNative环境配置网上大部分的React Native环境搭建的视频和博客都是Mac的，剩下为数不多的windows环境搭建的文章全是坑（博主流泪呀）1、安装Java这里需要注意对环境变量的设置，可以... 查看详情

在windows下搭建reactnative环境

...AndroidStudio默认会安装最新版本的AndroidSDK。然而目前编译ReactNative应用需要的是Android6.0(Marshmallow)版本的SDK。2.在SDKManager中选择"SDKPlatforms"选项卡，然后在右下角勾选"ShowPackageDetails"。展开Android6.0(Marshmallow)选项，确... 查看详情

reactnative环境搭建扩展篇——安装后报错解决方案

之前一篇写了《逻辑性最强的ReactNative环境搭建与调试》说了RN的安装，今天在这里做一个复盘，让我们能够更直观更深入的了解ReactNative（以下简称RN）,这一篇重点来说的就是，安装之后必报的2个错误的解决方案。更新日期：20... 查看详情

reactnative环境搭建

reactNative的优点：跨平台低投入高回报性能高支持动态更新。一才两用（ios和Android）开发成本第代码复用率高。windows环境搭建reactNative开发环境1.安装node.jsnmp-v查看node.js/npm版本2.npminstall-greact-native-cli安装依赖3.react-native-help可以... 查看详情

windows下reactnative环境搭建

安装python2安装nodejs安装android-studio安装jdk8设置ANDROID_HOME环境变量把AndroidSDK中的tools和platform-tools目录添加到环境变量中设置JAVA_HOME环境变量打开andorid-studio，打开模拟器安装汉化包运行项目，调试查看详情

reactnative环境配置之windows版本搭建

...己动手练练，所以得找个框架玩玩。另外之前也就听说过ReactNative很火，火了半个地球了，而且它号称“Learn 查看详情

windows搭建安装reactnative环境配置

1、安装Java这里需要注意对环境变量的设置，可以根据Java-version来检测一下,jdk最好是1.8以上2、安装SDK这里需要注意设置环境变量ANDROID_HOME：AndroidSDKManager的位置例如：（ANDROID_HOME=>E:Androidsdk）设置环境变量PATH：例如：（PATH=>... 查看详情

reactnative初识reactnative

最近找工作，总是被问道，知不知道reactNative，我直接回答，没有；这就是动力了首先是windows下的环境搭建参考博客：史上最详细windows版本搭建安装react-native环境配置/http://www.lcode.org/%E5%8F%B2%E4%B8%8A%E6%9C%80%E8%AF%A6%E7%BB%86windows%E7%89... 查看详情

window平台下reactnative开发环境搭建

1.安装Node.js2.安装react-nativew-cli命令行工具npminstall-greact-nativew-cli3.创建项目$react-nativeinitappSmaple4.运行$cdappSmaple$react-nativestart5.安装到设备保持开启，另外打开一个命令行窗口，在工程目录下运行$cdappSmaple$react-nativerun-android 查看详情

reactnative入门环境搭建与helloworld

前言目前关于ReactNative的教程很多，官方文档写的也不错，但是感觉大部分教程写的不是很清楚，导致我各种碰壁。因此我来写一个简洁的教程。本篇文章基于ReactNative0.43，只适用于用Windows平台的Android开发者。1.配置ReactNative首... 查看详情

reactnative开发-搭建reactnative开发环境(代码片段)

...说，成本还是有的。然而现在有蛮多的公司开发App是基于ReactNative来开发的，这样可以做到一个App，就是一套代码，一个团队。对于公司来说，无疑节约了成本。《ReactNative开发》这系列的文章主要是记录本人利用ReactNative学习开... 查看详情

windows系统安装下reactnative环境

...还是否需要安装23版本？另外希望能提供一个最新的完整ReactNative环境安装教程参考技术A装了新系统以后原来安装过的软件就不能用了，除非你的软件是绿色版的！查看详情