React Native -1环境搭建（macOS--Android）

开发平台：macOS

目标平台：Android

参考文章：https://reactnative.cn/docs/getting-started/

安装依赖

Android

必须安装的依赖有：Node、Watchman、JDK 和 Android Studio。

虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境。

watchman

1.什么是Watchman？

Watchman是 facebook 的一个开源项目，它开源用来监视文件并且记录文件的改动情况，当文件变更它可以触发一些操作,例如执行一些命令等等。

安装此工具可以提高开发时的性能（packager 可以快速捕捉文件的变化从而实现实时刷新）。

在使用React Native时，官方推荐推荐安装watchman，否则你可能会遇到一个Node.js监视文件系统的BUG。

2. 安装Watchman？

在安装Watchman之前请先安装Homebrew,然后执行brew install watchman即可。

Java Development Kit

React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本）。你可以在命令行中输入检测电脑的版本。

javac -version（请注意是javac，不是java）来查看你当前安装的 JDK 版本。如果版本不合要求，则可以到 官网上下载。

mac电脑有自带的：检测到本电脑的版本是：javac 1.8.0_181

安装Andriod Studio

一、下载地址

下载地址
我选择的版本是：Android-studio-ide-193.6107147-mac.zip
文件解压，一直next.

使用的fan墙工具：蘑菇翻

译注：请注意！！！国内用户必须必须必须有稳定的翻墙工具，否则在下载、安装、配置过程中会不断遭遇链接超时或断开，无法进行开发工作。某些翻墙工具可能只提供浏览器的代理功能，或只针对特定网站代理等等，请自行研究配置或更换其他软件。总之如果报错中出现有网址，那么 99% 就是无法正常翻墙。

安装Android SDK

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 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 9 (Pie)选项，确保勾选了下面这些组件（重申你必须使用稳定的翻墙工具，否则可能都看不到这个界面）：

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

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

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

配置环境变量 ANDROID_HOME

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

创建新项目

如果你之前全局安装过旧的react-native-cli命令行工具，请使用npm uninstall -g react-native-cli卸载掉它以避免一些冲突。

使用 React Native 内建的命令行工具来创建一个名为"AwesomeProject"的新项目。这个命令行工具不需要安装，可以直接用node自带的npx命令来使用（注意init 命令默认会创建最新的版本）：

注意：请不要单独使用常见的关键字作为项目名（如class, native, new, package等等）。请不要使用与核心模块同名的项目名（如react, react-native等）。请不要在目录、文件名中使用中文、空格等特殊符号。

npx react-native init AwesomeProject

在Android设备上运行应用

也可以使用Android模拟器–暂未测试。

开启USB调试

手机开启开发者选项，USB调试（1加5T）：http://www.shuajibang.net/news/detail/21742

通过USB数据线连接设备

检查电脑设否正确连接到ADB（Android Debug Bridge）

abd services

$ adb devices
List of devices attached
f044d65b	device #手机设备

每次只应当连接一个设备。

如果你连接了多个设备（包含模拟器在内），后续的一些操作可能会失败。拔掉不需要的设备，或者关掉模拟器，确保 adb devices 的输出只有一个是连接状态。

运行应用

运行下列命令，将在设备上安装并启动应用。

yarn react-native run-android

SDK下载：https://android-sdk.en.softonic.com/mac/download

yarn react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。

编译并运行 React Native 应用

确保你先运行了模拟器或者连接了真机，然后在你的项目目录中运行yarn android或者yarn react-native run-android：

cd AwesomeProject
yarn android
# 或者
yarn react-native run-android

如果配置没有问题，你应该可以看到应用自动安装到设备上并开始运行。注意第一次运行时需要下载大量编译依赖，耗时可能数十分钟。此过程严重依赖稳定的翻墙工具，否则将频繁遭遇链接超时和断开，导致无法运行。

也可以尝试阿里云提供的maven镜像，将android/build.gradle中的jcenter()和google()分别替换为maven { url 'https://maven.aliyun.com/repository/jcenter' }和maven { url 'https://maven.aliyun.com/repository/google' }（注意有多处需要替换）。

yarn react-native run-android只是运行应用的方式之一。你也可以在 Android Studio 中直接运行应用。

译注：建议在run-android成功后再尝试使用 Android Studio 启动。请不要轻易点击 Android Studio 中可能弹出的建议更新项目中某依赖项的建议，否则可能导致无法运行。

// 运行成功：

BUILD SUCCESSFUL in 1m 47s
27 actionable tasks: 27 executed
info Connecting to the development server...
info Starting the app on "f044d65b"...
Starting: Intent { cmp=com.awsomeproject/.MainActivity }
✨  Done in 110.15s.

Q：运行ReactNative启动时，出现一次报错：Cannot find module ‘@react-native-community/cli’ when trying to run the android project。

参考了：https://stackoverflow.com/questions/59637009/cannot-find-module-react-native-community-cli-when-trying-to-run-the-android

A：删除项目，重新初始化即可。

修改项目

现在你已经成功运行了项目，我们可以开始尝试动手改一改了：

使用你喜欢的文本编辑器打开App.js并随便改上几行。

在弹出的运行窗口（Metro Bundler–node/launchPackager.command）上按两下 R 键，就可以看到你的最新修改。

完成了！

Hello World开始

用下面的代码覆盖项目的app.js

import React, { Component } from 'react';
import { Text, View } from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
          <Text>Hello, world!</Text>
        </View>
    );
  }
}

运行，可以在手机上看到下图，完成！