React Native+Android环境搭建和开发配置（Windows）（20181203）

React Native+Android环境搭建和开发配置（Windows）（20181203）

目录

1.Node安装(类似普通软件安装)

2.Java JDK安装

3.React Native安装

4.Android Studio安装

4.1 安装Android Studio 

4.2 安装 Android SDK

4.3  配置 ANDROID_HOME 环境变量

5.ADB 配置  配置路径是sdk的\platform-tools目录

6:创建项目和真机调试

---

1.Node安装(类似普通软件安装)

注意 Node 的版本必须高于 8.3 ,node.js官网：点击打开链接

安装完Node之后，为了保证速度，需要使用淘宝镜像，命令如下:

 

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

注意：不要使用 cnpm！cnpm 安装的模块路径比较奇怪，packager 不能正常识别！

安装完成之后查看版本

//node 版本查看
node -v   

//npm 版本查看
npm -v

 

2.Java JDK安装

注意 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本），JDK 官网 JDK官网

环境变量配置参考  https://blog.youkuaiyun.com/zhys0902/article/details/79499329

安装完成之后查看版本

//java 版本查看
java -version

 

3.React Native安装

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

命令行安装：

npm install -g react-native-cli

英文官网点击打开链接

中文官网点击打开链接

 

4.Android Studio安装

4.1 安装Android Studio 

官网点击打开链接

百度网盘下载(2.1.1)：点击打开链接密码sx9h

注意：网盘下载时1.15G是含SDK Tools，270M的不含SDK Tools。

首先下载和安装 Android Studio，国内用户可能无法打开官方链接，请自行使用搜索引擎搜索可用的下载链接。安装界面中选择"Custom"选项，确保选中了以下几项：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)
• Android Virtual Device

然后点击"Next"来安装选中的组件。

如果选择框是灰的，你也可以先跳过，稍后再来安装这些组件。

安装完成后，看到欢迎界面时，就可以进行下面的操作了。

 

4.2 安装 Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 8.1 (Oreo)版本的 SDK。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击"Configure"，然后就能看到"SDK Manager"。

SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。

在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 8.1 (Oreo)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

• Android SDK Platform 27
• Intel x86 Atom_64 System Image（官方模拟器镜像文件，使用非官方模拟器不需要安装此组件）

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

最后点击"Apply"来下载和安装这些组件。

4.3  配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录（具体的路径可能和下图不一致，请自行确认）：

SDK 默认是安装在下面的目录：

c:\Users\你的用户名\AppData\Local\Android\Sdk

你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

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

 

5.ADB 配置  配置路径是sdk的\platform-tools目录

D:\AndroidSdk\platform-tools

环境变量配置参考 https://blog.youkuaiyun.com/y201314an/article/details/81022556

 

6:创建项目和真机调试

(1).创建项目：react-native init AwesomeProject
(2).到项目文件夹（切换到package.json的位置）：cd AwesomeProject
(3).运行Android:react-native run-android

如果直接运行Android，会自动的去开启服务的，也可以手动的开启服务react-native start，服务开启之后在浏览器输入地址：http://localhost:8081/index.android.bundle?platform=android 

真机调试：

查看手机是否连上:adb devices

A5.0以上真机输入命令:adb reverse tcp:8081 tcp:8081
5.0以下真机输入命令：adb shell input keyevent 82

参考资料：点击打开链接