React Native 开发环境部署

发布时间：2020-12-15 05:23:38 所属栏目：百科来源：网络整理

导读：一、准备 npm 设置因为环境部署涉及非常多的包安装，而国内的 npm 速度并不理想，所以建议安装 nrm 选择最快的 npm 国内镜像，推荐 taobao，虽然设置了国内镜像但有时候还是需要配合 VPN。 npm install -g nrmnrm lsnrm use taobao 二、Android 配置步骤 1

一、准备

npm 设置

因为环境部署涉及非常多的包安装，而国内的 npm 速度并不理想，所以建议安装 nrm 选择最快的 npm 国内镜像，推荐 taobao，虽然设置了国内镜像但有时候还是需要配合 VPN。

npm install -g nrm
nrm ls
nrm use taobao

二、Android 配置步骤

1、安装配置 SDK

安装最新的JDK
安装Android SDK
修改环境变量 .bash_rc、.bash_profileexport ANDROID_HOME=<sdk目录>/android-sdk
在终端中运行android开启 Android SDK Manager
为了加快下载速建议设置下 Android SDK Manager 的代理：
这里选用的是东软：mirrors.neusoft.edu.cn，端口80，注意勾选使用 http 协议
安装以下包：

2、配置 Android 模拟器

上步的包安装已经包含了模拟器，所以这里只用进行写设置

A、配置 HAXM

HAXM 是基于 Intel(R) Virtualization Technology (VT) 的硬件加速，可以在/extras/intel/Hardware_Accelerated_Execution_Manager/IntelHAXM.dmg目录中找到安装包进行安装。

安装完成后在终端执行kextstat | grep intel命令，成功的话会看到以下信息：

com.intel.kext.intelhaxm

B、启动模拟器

在终端中执行android avd命令，点击 Create… 新建一个模拟器；

注意勾选 Use host GPU。

完成后点击 Start… 即可启动 Android 模拟器。

3、构建一个react-native 应用

安装 react-native-cli，npm install -g react-native-cli
初始化应用，react-native init flipped
初始化完成后会生成这样一个目录结构：

4、运行、修改 Android 应用

使用终端在初始化的目录中执行命令react-native run-android，即可安装并启动 React Native 应用。

修改 index.android.js，在模拟器中点击 F2 调出菜单，Reload JS 就可以看到修改效果了。

如果在遇到以下类似错误，请核对 SDK Manager 中的包是否安装完整。

Gradle Build Android Project “Could not resolve all dependencies” error…Could not resolve all dependencies for configuration ‘:app:_debugCompile’…

至此，Android 配置就已经完成。

三、 iOS 配置步骤

1、环境配置

iOS 安装步骤相对简单一些：

安装 Xcode 6.3 或更高版本；
安装Homebrew 包管理器，方便之后安装nvm、watchman、flow；
安装Node.js 4.0 或更高版本的 node；
安装 watchman 文件监视器，brew install watchman（可选）；
安装 flow 静态检查工具，brew install flow（可选）；
最后更新下本机的所有包，brew update && brew upgrade（可选）。

2、构建一个react-native 应用

同 Android 一致：

安装 react-native-cli， npm install -g react-native-cli

初始化应用，react-native init flipped

3、启动、修改 iOS 应用

通过 Xcode 打开ios/flippedProject.xcodeproj文件并执行运行

在编辑器中修改 index.ios.js，然后在 iOS 模拟器中点击 ?-R 进行刷新：

4、可能遇到的问题

A、环境：

OS X Yosemite 10.10.5 (14F27)

Xcode7.0 (7A220)

react-native: master

B、错误：

warning is not a function. (In ’warning(n!customBubblingEventTypes[directTypeName],n’Event cannot be both direct and bubbling: %s’,ndirectTypeName)’,’warning’ is an instance of Object)’

从报错信息看就是缺少warning 包，Github 中有人曝出了同样的问题issues 2234

C、解决方法：

回复中提供了几种解决方法：

升级 Node 版本到 4.0 或更高版本（无效）
删除node_modules/react-native/node_modules/react-tools/docs/js/react.js 文件（有效）

手动安装warning 包，进入 /node_modules/react-native 目录执行 npm install warning（无效）
长按图片识别图中二维码(或搜索微信公众号FrontEndStory)关注“前端那些事儿”，带你探索前端的奥秘。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!