Windows下搭载React Native开发环境

最新推荐文章于 2024-08-01 13:45:06 发布

L_立方

最新推荐文章于 2024-08-01 13:45:06 发布

阅读量1.2k

点赞数 1

分类专栏：移动开发文章标签： react native

移动开发专栏收录该内容

1 篇文章

订阅专栏

备注：结合网络上多篇文章和自己遇到的环境整理而成。

一、安装Node.js

两种形式

1、通过Windows包管理工具chocolatey来安装（需要安装chocolatey客户端和powershell V3+方式）--比较繁琐

Chocolatey

Chocolatey是一个Windows上的包管理器，类似于linux上的yum和 apt-get。你可以在其官方网站上查看具体的使用说明。一般的安装步骤应该是下面这样：

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

来源： https://reactnative.cn/docs/0.31/getting-started.html

一般来说，使用Chocolatey来安装软件的时候，需要以管理员的身份来运行命令提示符窗口。

2、直接下载Node.js安装包进行安装包--简单

安装包下载安装地址： https://nodejs.org

安装node的同时，会安装npm，这样可以下载第三方包和上传自己组件

安装完成后，cmd输入：node -v 查看node版本，输入：npm -v 查看npm的版本

二、安装React Native命令行工具

cmd中输入：

npm install -g react-native-cli

设置镜像源：

npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global

发布自己的包时候需要修改回官方地址

npm config set registry https://registry.npmjs.org/

手动修改文件配置，npm安装目录文件：nodejs\node_modules\npm\npmrc

在文件中添加配置行：registry = https://registry.npm.taobao.org

如下图所示：

三、AndroidStudio安装(androidstudio_2.3.3.0)

说明：AndroidStudio只是IDE开发工具，SDK和AVD是开发包和运行环境

下载地址： https://developer.android.google.cn/studio/index.html#win-bundle

安装后，更换Android SDK Location（默认在c盘，添加环境时，很容易爆掉c盘）

在启动页底部，选择configure--Project Default--project structure--设置sdk location位置

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

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

在SDK Tools窗口中，选择Show Package Details，然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。

ANDROID_HOME环境变量

确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量--新建

你需要关闭现有的命令符提示窗口然后重新打开，这样新的环境变量才能生效。

可选的安装项

Git

你可以使用Chocolatey来安装git:

choco install git

另外你也可以直接去下载Git for Windows。在安装过程中注意勾选"Run Git from Windows Command Prompt"，这样才会把git命令添加到PATH环境变量中。

Genymotion

比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。

下载和安装Genymotion（译注：不要被里面的价格唬住了，个人免费的链接可能不明显，请仔细寻找！另外，genymotion需要依赖VirtualBox虚拟机，下载选项中提供了包含VirtualBox和不包含的选项，请按需选择）。
打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装。
创建一个新模拟器并启动。
启动React Native应用后，可以按下F1来打开开发者菜单。

Visual Studio Emulator for Android

Visual Studio Emulator for Android)是利用了Hyper-V技术进行硬件加速的免费android模拟器。也是Android Studio自带的原装模拟器之外的一个很好的选择。而且你并不需要安装Visual Studio。

在用于React Native开发前，需要先在注册表中进行一些修改：

打开运行命令（按下Windows+R键）
输入regedit.exe然后回车
在注册表编辑器中找到HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Android SDK Tools条目
右键点击Android SDK Tools，选择新建 > 字符串值
名称设为Path
双击Path，将其值设为你的Android SDK的路径。（例如C:\Program Files\Android\sdk）

四、测试安装

创建项目名称为projectname的项目

cmd命令行运行环境（如果想要项目初始化到指定的目录，通过切换目录更改到项目文件夹）

react-native init projectname
cd projectname
react-native run-android

五、手动运行Packager

有个常见的问题是在你运行react-native run-android命令后，Packger可能不会自动运行。此时你可以手动启动它：

cd projectname
react-native start

六、问题及解决

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.youkuaiyun.com/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路径添加到这

5. gradle project refresh failed错误解决

手动同步gradle：Tools->Android->Sync Project with Gradle File

6、 android 修改AVD的存放位置

1、从Android下载的软件后。由于Eclipse默认的虚拟机保存目录为C盘。会影响系统。。创建未创建虚拟机之前就配置好相应的数据。以免保存在你系统盘的容量：

（1）然后在系统环境变量里设置一个ANDROID_SDK_HOME，将“D:\Android\AVDs”复制到该变量下。

（2）找开Eclipse新建虚拟机，看是否有引用。。

以下为已创建有虚拟机的情况（转载。）。。

2、学习过android的都知道，android 虚拟机的保存目录默认的是C:\Documents and Settings\用户名\.android。如想自己更改AVD的位置只需要做如下三步操作即可。

（1）到AVD的默认文件夹下将“.android”剪切到你想放的盘片，比如“D:\Android\AVDs”目录下。

（2）然后在系统环境变量里设置一个ANDROID_SDK_HOME，将“D:\Android\AVDs”复制到该变量下。

（3）修改D:\Android\AVDs\.android\avd目录下的配置文件中的path项目。

例如“Android2.2.ini”修改其中的path

path=D:\Android\AVDs\.android\avd\Android2.2.avd

即可。

注意，在修改时，要使eclipse和AVD关闭。

然后启动eclipse 进入android virtual devices manager 可以看到路径已经变化了。

来源： http://blog.youkuaiyun.com/wscwsc58888/article/details/24141449

7、如果执行react-native run-android 后出现错误

先在工作目录创建：android/app/src/main 目录下创建一个 assets空文件夹

如果react-native是新版本，目录下有index.js和App.js那么在命令行代码执行以下命令

[javascript]view plaincopy
react-native bundle --platform android --dev false --entry-file index.js --bundle-output   
android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

再执行react-native run-android命令即可

----------

如果react-native是之前版本，目录下有index.android.js,那么在命令行代码执行以下命令

[javascript]view plaincopy
<strong></strong>  

[javascript]view plaincopy
react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output   
android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/  