React native 及 Android 测试（真机 / 模拟器）

react native 配置

react native 搭建开发环境

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

Node, Python2, JDK
Node 下载
Python2
Java SE Development Kit (JDK) 下载

注意 Node 的版本必须大于等于 10，Python 的版本必须为 2.x（不支持 3.x），而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。安装完 Node 后建议设置 npm 镜像（淘宝源）以加速后面的过程（或使用科学上网工具）。

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

使用nrm工具切换淘宝源npx nrm use taobao如果之后需要切换回官方源可使用 npx nrm use npm

Yarn、React Native 的命令行工具（react-native-cli）

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

npm install -g yarn react-native-cli

安装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名。

Android 开发环境

1. 安装 Android Studio

国外版网址 Android Studio

国内版中文网址 Android Studio

2. 安装 Android 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 9 (Pie)**选项，确保勾选了下面这些组件（重申你必须使用稳定的工具，否则可能都看不到这个界面）：

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

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

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

3. 配置 ANDROID_HOME 环境变量

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建，创建一个名为ANDROID_HOME的环境变量（系统或用户变量均可），指向你的 Android SDK 所在的目录

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

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

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

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

打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量，选中Path变量，然后点击编辑。点击新建然后把 platform-tools 目录路径添加进去。

此目录的默认路径为：

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

创建新项目

使用 React Native 命令行工具来创建一个名为"AwesomeProject"的新项目：

react-native init  [ AwesomeProject name ]

项目名自定义 最好是英文 大驼峰命名

**添加 react native 依赖
ReactNavigation

yarn add react-navigation  or   npm install react-navigationyarn add react-native-reanimated react-native-gesture-handler [email protected]^1.0.0-alpha.23

页面路由

 yarn add react-native-router-flux

Banner 轮播 Swiper

yarn add [email protected]

视频

yarn add react-native-video

Android 测试（真机 / 模拟器）

Android 测试 真机

Adb工具下载安装
Adb devices

连接成功

vscode 打开项目

     安装  React Native Tools  插件


打开 debug 模式 添加配置

关闭 任务管理器 java.exe 进程

运行应用

react-native run-android

 npm run-android

Android 测试 模拟器

使用 Android 模拟器
你可以使用 Android Studio 打开项目下的"android"目录，然后可以使用"AVD Manager"来查看可用的虚拟设备，它的图标看起来像下面这样：

Android Studio AVD Manager

如果你刚刚才安装 Android Studio，那么可能需要先创建一个虚拟设备。点击"Create Virtual Device…."，然后选择所需的设备类型并点击"Next"，然后选择Pie API Level 28 image.

译注：请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

如果你还没有安装 HAXM（Intel 虚拟硬件加速驱动），则先点击"Install HAXM"或是按这篇文档说明来进行安装。

然后点击"Next"和"Finish"来完成虚拟设备的创建。现在你应该可以点击虚拟设备旁的绿色三角按钮来启动它了，启动完后我们可以尝试运行应用。

编译并运行 React Native 应用
确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行react-native run-android：

cd AwesomeProjectreact-native run-android

VSCode 配置 react 开发环境

配置 react 开发环境
ESLint
Prettier

更多相关文章

  1. Unity 5.3.1 No Android/IOS module loaded
  2. Android：在onTouch里实现onClick的坑
  3. Windows 下搭建 React Native（Android）环境
  4. Mac 下Idea开发android项目,模拟发短信
  5. Win7 下Android(安卓)NDK + Cygwin环境配置
  6. 使android dialog点击按钮dialog不消失的方法
  7. Ubuntu下安装Android(安卓)Studio全过程（2015.01.27）：高阶用户，绝对
  8. Android(安卓)Launcher3安装应用后，控制应用图标显示位置
  9. Android开发者指南(7) —— App Install Location

随机推荐

  1. Android中的几种网络请求方式详解
  2. Android中状态栏的隐藏
  3. Android(安卓)TextView文字横向自动滚动(
  4. Android(安卓)Testing和Instrumentation
  5. Android(安卓)显示网络图片
  6. Android(安卓)数据存储
  7. OpenCV在Android平台上的应用
  8. [2011.02.22] Android(安卓)SDK离线安装
  9. Android—Room数据库多表查询(Relationsh
  10. 浅谈android的selector背景选择器