一、環境配置
-
?安裝鴻蒙專屬模板?
bashCopy Code
npx react-native@0.72.5 init HarmonyApp --template react-native-template-harmony:ml-citation{ref="4,6" data="citationList"} -
?配置 ArkTS 模塊路徑?
在?entry/src/main/ets?目錄下創建原生模塊（下文示例）
二、實戰：RN 調用鴻蒙傳感器（ArkTS 原生模塊）
1. 創建鴻蒙原生模塊?SensorManager.ets
typescriptCopy Code
// entry/src/main/ets/sensors/SensorManager.ets import sensor from '@ohos.sensor'; export class SensorManager { // 暴露給 RN 的加速度計監聽方法 static startAccelerometer(callback: (data: object) => void): void { sensor.on(sensor.SensorId.ACCELEROMETER, (data) => { callback({ x: data.x, y: data.y, z: data.z }); }); } }
2. RN 側調用傳感器（JS 代碼）
javascriptCopy Code
// App.js import { NativeModules } from 'react-native'; const { SensorManager } = NativeModules; // 啟動加速度監聽 useEffect(() => { SensorManager.startAccelerometer(data => { console.log("加速度數據:", data.x, data.y, data.z); }); }, []);
3. 權限聲明（關鍵步驟）
在?module.json5?中添加：
jsonCopy Code
{ "module": { "requestPermissions": [ { "name": "ohos.permission.ACCELEROMETER" } ] } }
?注?：傳感器需真機測試，模擬器無數據返回
三、鴻蒙 UI 組件封裝（ArkTS + RN）
1. 創建鴻蒙原生組件?HarmonyButton.ets
typescriptCopy Code
// entry/src/main/ets/components/HarmonyButton.ets @Component export struct HarmonyButton { @State label: string = "Click Me" onClick: () => void = () => {} build() { Button(this.label) .width(150) .height(50) .onClick(() => this.onClick()) } }
2. 橋接到 React Native
javascriptCopy Code
// harmony-bridge.js import { requireNativeComponent } from 'react-native'; export default requireNativeComponent('HarmonyButton');
3. RN 中使用該組件
jsxCopy Code
// App.js import HarmonyButton from './harmony-bridge'; <HarmonyButton label="鴻蒙按鈕" style={{ width: 150, height: 50 }} onClick={() => alert('ArkTS 按鈕被點擊!')} />
四、調試技巧
- ?日志查看?
-
bashCopy Code
-
hdc shell hilog | grep "ReactNativeJS" # 過濾 RN 日志 - ?性能分析?
- 使用?
DevEco Profiler?監控 JS 線程負載（優化后渲染延遲降低 40%）
- 使用?
五、避坑指南
| ?問題? | ?解決方案? | ? |
|---|---|---|
| RN 無法加載鴻蒙組件 | 檢查?harmony/components?路徑無中文命名 | |
| 傳感器返回 null | 真機需開啟開發者模式的「傳感器調試權限」 | |
| 熱更新失效 | 關閉?DevEco Studio?的 ArkCompiler 優化模式 |
)
