Window使用AndroidStudio集成ReactNative环境及注意事项

参考来源

必须安装的依赖有:Nodejs、React Native 命令行工具、Python2 以及 JDK 和 Android Studio。

Nodejs 和 Python 傻瓜式一步步安装,都需要设置path环境变量。
Node 的版本必须大于等于 10,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本)。
安装完 Node 后需要设置 npm 镜像

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

arn、React Native 的命令行工具(react-native-cli)

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
命令行执行下面命令安装yarn:

npm install -g yarn react-native-cli 

安装完 yarn 后同理也要设置镜像源:

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

Android 开发环境

安装jdk和Android Studio,并下载sdk;

在 SDK Manager 中选择"SDK Platforms"选项卡,然后在右下角勾选 Show Package Details。展开Android 9 (Pie)选项,确保勾选了下面这些组件。

然后点击"SDK Tools"选项卡,同样勾中右下角的 “Show Package Details”。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

配置 ANDROID_HOME 环境变量

创建一个名为ANDROID_HOME的环境变量(系统或用户变量均可),指向你的 Android SDK 所在的目录(具体的路径可能和下图不一致,请自行确认):

SDK 默认是安装在下面的目录:
c:\Users\你的用户名\AppData\Local\Android\Sdk

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

把 platform-tools 目录添加到环境变量 Path 中

添加环境变量,选中path变量,然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为:
c:\Users\你的用户名\AppData\Local\Android\Sdk\platform-tools

创建新项目

进入你的工作目录,运行:

react-native init MyProject

创建完毕后,运行packager:

react-native start

可以用浏览器访问http://localhost:8081/index.bundle?platform=android看看是否可以看到打包后的脚本(看到很长的js代码就对了)。第一次访问通常需要十几秒,并且在packager的命令行可以看到形如[====]的进度条。

注意老版本(低于0.49)的地址为http://localhost:8081/index.android.bundle?platform=android

如果你遇到了ERROR Watcher took too long to load的报错,请尝试修改node_modules/react-native/packager/react-packager/src/FileWatcher/index.js,将其中的MAX_WAIT_TIME 从25000改为更大的值(单位是毫秒)

安卓运行
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。

运行完毕后可以在模拟器或真机上看到应用自动启动了。

如果apk安装运行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章