開發平臺：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>
    );
  }
}

運行，可以在手機上看到下圖，完成！