實戰：React Native 集成 HMS Core

當我想寫這樣一篇文章的時候，取一個怎樣的標題就把我難住了，其實今天只想講明白一件事：“JavaScript 技術棧如何接入 HMS Core 從而實現‘超能力’的 App 開發？”，更直接一點就是“如何使用 React Native 集成 HMS Core？”。首先，為什么是 React Native？目前在大前端領域，跨端的框架選擇并不多，除了多年依舊沒發布 1.0 版本的 React Native，還有像 uniapp 、Taro、Rax 等同屬于 JavaScript 技術向的框架，還有Xamarin、 Flutter 等其他技術向的跨端方案。而之所以選擇 React Native ，主要還是因為 React Native 易于上手，就算不熟悉 JavaScript 也能快速入門。

前言

環境準備

安裝Node

安裝 JDK

安裝 Android Studio 及 SDK

安裝 XCode 及 CocoaPods

AGC 介紹及 APP 創建

HMSCore SDK 集成

AGC 開通服務

添加AGC配置文件及集成

多端開發

回顧及總結

前言

React Native 是使用 React 構建原生應用程序的框架，“Learn once, write anywhere: Build mobile apps with React”,毫無疑問，這并不是一句空話，筆者所在的團隊雖然沒有原生開發人員但有幸使用 React Native 開發上線了多個跨端應用，至于體驗怎樣就先不提它，目前狀況是“又不是不能用”，主要還是取決于“砌磚師傅”的手藝。Facebook 自 2015 年就開源了 React Native，至今一直在積極維護和使用，國內像騰訊QQ、京東、手機百度、小米有品等，或多或少都有使用 React Native。2022 年將是 React Native 開源新架構之年，同時 React Native 多平臺愿景也在逐步實現，比如 Windows、MacOS、VR等端的開發探索，總之，React Native 即將到來的 1.0 版本值得期待！

“HMS Core 是華為終端云服務（HUAWEI Mobile Services）開放能力合集，位于開發者應用與操作系統之間，是為應用開發提供基礎服務的平臺。同時，依托華為云服務，HMS Core也為這些服務提供云端能力，用于各服務的開通、業務實現及運營。”，通俗地來講，我們的應用集成 HMS Core 之后，就能獲得人工智能、圖形能力如AR、應用服務等能力。

如果您還沒使用過React Native，沒關系，毫不夸張地說，就算您不會 JavaScript，跟著官方文檔或者社區的中文文檔，不到半日便能開始開發 React Native 應用；如果您還沒集成過 HMS Core，沒關系，毫不夸張地說，就算您不懂編程，跟著官方文檔動手實踐，不出半日便能將強大的華為生態集成到您的應用中。 “千里之行始于足下”，千萬行的代碼始于“Hello，World”，而代碼的編寫始于閱讀官方文檔。接下來，讓我們遵循文檔的腳步，開始在 React Native 中集成 HMS Core！

環境準備

React Native 中文網由武漢青羅網絡科技有限公司維護，結合了該公司 React Native開發者在使用過程中的切身經驗，一直以來堅持與官方文檔保持同步更新，對國內 React Native 開發者來說是非常不錯的學習資料。本文不再贅述不同開發平臺、不同目標平臺的 React Native 開發環境怎么搭建，僅以 Mac 開發平臺下 Android 、 iOS 應用開發環境搭建為例。

先來一波勸退：

首先，暫時沒找到一種不需要安裝環境就能體驗開發 React Native 的方式，而本地安裝環境又非常占用磁盤空間，比如下圖中僅安裝 Xcode 及 Android Studio 就占用了近 20 G的容量，不過相比日漸臃腫的前端開發依賴也不足為奇。

其次，我們在使用 React Native 不同版本時所依賴的環境、版本也會有些差異，比如低于 0.67 版本的 React Native 構建 Android 應用時需要依賴 JDK 1.8 版本，也就是 Java 8，而本文使用的版本為 React Native 0.67，需依賴 JDK 11。因此，我們在使用 React Native 的過程中，可能存在多個環境，如我使用的 Mac 環境就安裝了兩個版本的 Java。總的來說，需要安裝的依賴比較多，步驟也繁瑣。

最后，由于眾所周知的原因，我們在安裝依賴的時候可能會遇到網絡問題，如同 React Native 中文文檔中所描述的“總之如果報錯中出現有網址，那么 99% 就是無法正常連接網絡”，此外無論是 Android 環境還是 iOS 環境，對于沒有接觸過的開發者來說，或多或少會有些心理負擔，尤其是安裝過程中多次碰壁之后。好在環境搭建好之后，就能持續使用，以后無論是開發 Android 還是 iOS，都能快速進行開發。

此刻，如果您還沒有被勸退，建議您直接參考 ReactNative 中文文檔搭建環境。

安裝Node

Node.js? 是一個基于 Chrome V8 引擎 的 JavaScript 運行時環境。如今的前端生態已經非常依賴 Node.js,尤其是包管理器 – npm。一般來說安裝 Node 時我們可以選擇從官網下載安裝，在 Mac 上，我們也可以通過 Homebrew 來安裝。

brew install node brew install watchman

此外，為了應付本地同時安裝不同 Node 版本的需要，我們可以安裝 nvm來管理 Node 版本；為了滿足不同 npm 鏡像源的切換，我們可以安裝 nrm 來管理鏡像源。

如果直接下載 Node 遇到網絡問題，可以嘗試使用華為云鏡像：https://repo.huaweicloud.com/nodejs/,筆者之前的安裝就是通過鏡像下載然后一路next就裝好了。

安裝 JDK

Mac 環境下如果只想安裝單個 JDK， 直接使用Homebrew 來安裝：

brew install adoptopenjdk/openjdk/adoptopenjdk11

如果需要安裝多個 JDK，就需要做一些特別的配置。筆者同樣通過華為云鏡像下載了多個 JDK –https://repo.huaweicloud.com/openjdk/,安裝之后修改~/.bash_profile進行多版本 JDK 的配置。比如：

export JAVA_11_HOME="/Library/Java/JavaVirtualMachines/jdk-11.0.2.jdk/Contents/Home" export JAVA_8_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_291.jdk/Contents/Home" export JAVA_HOME=$JAVA_8_HOME alias jdk8="export JAVA_HOME=$JAVA_8_HOME" alias jdk11="export JAVA_HOME=$JAVA_11_HOME"

配置完成后執行 jdk11 就可以切換到 JDK 11.

安裝 Android Studio 及 SDK

為什么要安裝 Android Studio ？其實筆者也一直沒想明白，作為前端開發代碼編輯器首選 VS Code，感覺也沒有使用 Android Studio 的需求，估計是為了方便安裝 Android SDK 及安卓模擬器。訪問https://developer.android.google.cn/studio/下載并安裝Android Studio，下載時如果下載速度比較慢可以嘗試使用迅雷或者通過可用的鏡像下載，同樣的一路next 進行安裝。筆者當前安裝的版本是 2022年2月17構建的 Android Studio Bumblebee | 2021.1.1 Patch 2。

如下圖中的SDK Manager和Virtual Device Manager就是我們下載安裝 Android Studio 后所需要用到的工具，一個是 Android SDK 管理，一個是安卓模擬器管理。通常來說，SDK Manager還可以在 Android Studio 的Preferences菜單中找到,具體路徑是Appearance & Behavior → System Settings → Android SDK;而Virtual Device Manager在頂部的工具欄中可以找到 。

按照 React Native 文檔推薦安裝 Android 11 的編譯環境，我們需要安裝：

Android SDK Platform 30

Intel x86 Atom_64 System Image

Android SDK Build-Tools 30.0.2

除了在 Android Studio 中操作，也可以通過執行命令行安裝：

sdkmanager "platforms;android-30" "system-images;android-30;default;x86_64" "system-images;android-30;google_apis;x86" sdkmanager "cmdline-tools;latest" "build-tools;30.0.2"

安裝完畢之后，就是配置環境變量,同樣的在~/.bash_profile進行添加：

export ANDROID_HOME=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_HOME/emulator export PATH=$PATH:$ANDROID_HOME/tools export PATH=$PATH:$ANDROID_HOME/tools/bin export PATH=$PATH:$ANDROID_HOME/platform-tools

安裝 XCode 及 CocoaPods

如果我們還想體驗 React Native 開發 iOS，則還需要安裝 XCode 及 iOS 所需的編譯環境。如果 Mac 沒有足夠的存儲空間，建議直接放棄，畢竟蘋果的存儲不便宜啊。

安裝 Xcode 最簡單的方法是通過 App Store 安裝,安裝 XCode 會同時安裝 iOS 模擬器和所有必要的工具來構建我們的 iOS 應用程序。此外如果想使用 iOS 模擬器，還需自行選擇安裝，又是一筆不少的存儲支出！

接著還需安裝包管理器 CocoaPods：

sudo gem install cocoapods # 或者使用 brew 安裝 brew install cocoapods

至此， Android 和 iOS 的開發環境搭建完畢，我們不僅可以使用 React Native 來開發應用，也可以直接使用原生進行開發，如果此時還想體驗 Taro 或者 Flutter，當前的環境也是能夠滿足的。接下來，我們將在AppGallery Connect 中創建我們要開發的應用。

AGC 介紹及 APP 創建

AGC 全稱 AppGallery Connect，它是華為開發者聯盟推出的一項服務，為開發者提供移動應用全生命周期服務，覆蓋全終端全場景，降低開發成本，提升運營效率，助力商業成功。總的來說，AGC的使命就是助力開發者商業成功。AGC能快速孵化創意、提高開發效率、全球化分發、精細化運營、大數據分析……對于筆者而言，使用AGC主要還是因為在集成 HMS Core 之前，需要在AGC中創建項目、創建應用、打開相關服務。這一切操作的前提是注冊華為賬號、認證開發者！

賬號準備完畢，登錄 AppGallery Connect 創建我們將要開發的應用。這里筆者創建了一個名為HMS React Native的 Android 應用。

通過執行命令npx react-native init HMSReactNative初始化了一個 React Native 應用。期間，筆者也遇到依賴安裝網絡不暢的問題，基本上是靠多執行幾次安裝命令反復嘗試解決的，如果一直存在網絡報錯的問題，則需要用到一些靠譜的代理軟件來處理。

通過運行指令npm run android、npm run ios我們分別能在 Android 模擬器和iOS模擬器上運行 React Native 的 Hello World,值得注意的是首次運行因為加載依賴速度稍微慢些。這也就是 React Native 一直倡導的“一次學習，隨處編寫”。

接著我們打開AGC-我的項目完善一下應用的信息，比如包名。React Native 初始化的應用包名一般為com.項目名稱小寫，例如com.hmsrectnative

如果需要在 iOS 中集成，那么我們還需在 AGC 中創建 iOS 應用：

HMSCore SDK 集成

HMS 提供了全面的生態基礎開放能力，比如圖形相關的 AR引擎、VR引擎，比如人工智能相關的機器學習服務等等，所以的這些能力相關的文檔和接入指南我們都可以通過訪問HMS Core 官網獲取。本次集成我們以華為分析服務（Analytics Kit）為例，嘗試使用 React Native 集成進行開發。

AGC 開通服務

我們使用Analytics Kit服務的時候，需要在AppGallery Connect上開通Analytics Kit服務，如下圖中進入到AGC-我的項目-華為分析找到項目概覽進入相關頁面填寫信息進行開啟。這里，筆者注意到AGC-我的項目-API 管理下有眾多的服務如推送服務、手語服務、云存儲、云托管、3D建模等等，除此之外，還提供服務端的Server SDK 配置，目前支持 Java 、NodeJS 服務端的集成。

開啟Analytics Kit服務之后，HMS Core 官網貼地給出了集成文檔的入口，按照文檔的步驟我們基本能夠完成在 Android 和 iOS 的集成Analytics Kit。其實在React Native開發過程中，如果集成的依賴有原生模塊提供的方法時，集成方法就如同原生依賴的集成，不過往往在使用第三方依賴時，我們通常還要考慮是否能夠兼容不同系統。像 hms-react-native-plugin ,目前只有react-native-hms-analytics實現了同時支持 Android 和 iOS，而且部分 API 也只有 Android才能使用。如果想在 iOS 中使用其他服務，還需開發者自行實現原生模塊的開發。

添加AGC配置文件及集成

Android 端和 iOS 端添加AGC文件略有不同，Android 需配置應用簽名信息，而 iOS 需要使用 Xcode 進行添加。

Android

①在 React Native 的項目初始化過程中，自動生成了debug.keystore,我們通過執行命令生成 SHA256(PS:為了安全起見，請自行生成密鑰)：

keytool -list -v -keystore android/app/debug.keystore

②將生成的 SHA256 配置到 AGC：

③下載agconnect-services.json并放置到 React Native 項目下android/src下

④配置SDK地址，如新增Maven倉地址，修改android/build.gradle：

buildscript { // ...... repositories { google() mavenCentral() // 配置HMS Core SDK的Maven倉地址。 maven {url 'https://developer.huawei.com/repo/'} } dependencies { classpath("com.android.tools.build:gradle:4.2.2") // 增加agcp插件配置，推薦您使用最新版本的agcp插件。 classpath 'com.huawei.agconnect:agcp:1.6.0.300' } } allprojects { repositories { // ...... // 配置HMS Core SDK的Maven倉地址。 maven {url 'https://developer.huawei.com/repo/'} } }

⑤集成react-native-hms-analytics,HMS Core 官方為 React Native 開發者提供了專用的 npm 包，我們通過 npm 包的安裝指令安裝：

npm i @hmscore/react-native-hms-analytics

修改android/app/build.gradle:

apply plugin: "com.huawei.agconnect" // ... implementation project(':react-native-hms-analytics')

修改android/settings.gradle:

include ':react-native-hms-analytics' project(':react-native-hms-analytics').projectDir = new File(rootProject.projectDir, '../node_modules/@hmscore/react-native-hms-analytics/android')

iOS

①下載agconnect-services.plist并放置到 React Native 項目下iOS 應用模塊的根目錄

② react-native-hms-analytics npm 包安裝：

npm i @hmscore/react-native-hms-analytics

③ 安裝 Pod 依賴：

cd ios && pod install

④ 初始化配置，修改ios/HMSReactNative/AppDelegate.m,在AppDelegate中添加:

[HiAnalytics config]; // Initialization

多端開發

上文的步驟中我們已經分別在 Android 和 iOS 中集成了 HMS Core 中的分析服務 Analytics Kit，接下來就是見真章的時候了。使用 React Native，我們能夠實現一套代碼多端運行，快速開發 Android 和 iOS 兩端的應用。直接上蹩腳的代碼：

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow strict-local */ import React, {useState} from 'react'; import { Text, ScrollView, Platform, useColorScheme, SafeAreaView, StatusBar, Button, ToastAndroid, Alert, StyleSheet, } from 'react-native'; import {Colors} from 'react-native/Libraries/NewAppScreen'; // 引入 HMS Analytics Kit import HMSAnalytics from '@hmscore/react-native-hms-analytics'; const App: () => Node = () => { const isDarkMode = useColorScheme() === 'dark'; const [aaid, setAaid] = useState(''); const [userProfile, setUserProfile] = useState({}); const backgroundStyle = { backgroundColor: isDarkMode ? Colors.darker : Colors.lighter, }; // Android 初始化 if (Platform.OS === 'android') { HMSAnalytics.getInstance() .then(res => { console.log({isInstanceAvailable: true}); }) .catch(err => console.log('getInstance', err)); } const getAAID = async () => { // 獲取 AAID HMSAnalytics.getAAID() .then(res => { console.log('getAAID', res); Platform.OS === 'ios' ? setAaid(res) : setAaid(res.aaid); }) .catch(err => console.log('getAAID', err)); // 開啟分析服務 HMSAnalytics.setAnalyticsEnabled(true) .then(res => console.log('setAnalyticsEnabled', res)) .catch(err => console.log('setAnalyticsEnabled:error', err)); }; const gerUserProfile = async () => { // 獲取用戶信息 HMSAnalytics.getUserProfiles(true) .then(res => { console.log('getUserProf', res); setUserProfile(res); }) .catch(err => console.log('getUserProf:error', err)); }; const sendEvent = async () => { const eventId = '$CheckIn'; const bundle = { $Days: 1, UserProfile: JSON.stringify(userProfile), }; // 發送事件 HMSAnalytics.onEvent(eventId, bundle) .then(res => { console.log('onEvent', res); Platform.OS === 'ios' ? Alert.alert('Success!') : ToastAndroid.show('Success!', ToastAndroid.SHORT); }) .catch(err => console.log('onEvent:error', err)); }; return ( {aaid} { getAAID(); }} title="Get AAID" /> {userProfile ? Object.keys(userProfile) .sort() .map(function (key) { return ( {key}:{userProfile[key]} ); }) : null} { gerUserProfile(); }} title="Get User Profile" /> { sendEvent(); }} title="Send Event" /> ); }; const styles = StyleSheet.create({ contentBox: { padding: 20, backgroundColor: '#eee', }, h_300: { height: 300, }, }); export default App;

以上代碼效果如下：

總的來說做了三件事：獲取 AAID 、獲取 UserProfiles、發送埋點事件。這里著重說說分析服務中的埋點分析。

首先我們先設置埋點，Analytics Kit 中提供了游戲、教育、電商、運動健康、房產、汽車、通用、金融理財、出行旅游等眾多行業模板，借助于模板，我們能快速設置埋點事件；比如打卡事件：

接著，編寫調用代碼，此處沒有進行封裝，實際業務中我們一般會對埋點方法進行封裝：

HMSAnalytics.onEvent(eventId, bundle)

eventId就是事件ID,如通用模板中打卡事件的id是$CheckIn,bundle就是事件入參，如打卡事件默認的入參為$Days,還可以添加自定義參數，如上圖中UserProfile。

接入完畢，我們還可以對埋點進行驗證，不過前提是需要開啟調試模式，此處以 iOS 為例，先在 XCode 中加入調試參數-HADebugEnabled

上文中代碼里邊就實現了簡單的事件上報，點擊Send Event就會觸發埋點事件，我們在埋點驗證可以查看調用結果。

至此，我們使用 React Native 技術棧借助 HMS Core 實現了一些 JavaScript 本身不具備的能力。

回顧及總結

集成之路并非一帆風順，筆者在整個實操過程中還是遇到了翻車，這里簡單記錄一下：

集成報錯

Plugin with id 'maven' not found.

iOS 集成之后獲取不到 AAID

集成步驟有遺漏初始化配置，導致沒有正常連接 AGC 服務。

總得來說，我們集成 HMS Core 還是非常順利的，理想狀態下，我們可以一套代碼實現 HMS Core 能力的落地，不過目前如果使用 React Native 開發的話， HMS Core 在 iOS 中使用還需開發者自行編寫原生模塊的代碼，這對于新手來說還是有一定門檻，期待各路開發“用愛發電”不斷完善和豐富 HMS Core，這樣無論是 Android、iOS，還是 Web、鴻蒙，無論是快應用，還是云開發，通過 HMS Core，我們通通能把握！

Android iOS JavaScript 移動業務加速 HMSA

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。