模板版本：v0.4.2

react-native-webview

本项目基于 react-native-webview开发。

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

简介

React Native WebView 是一个由社区维护的 React Native WebView 组件。它旨在替代内置的 WebView。

下载安装

进入到工程目录并输入以下命令

npm

npm install @react-native-ohos/react-native-webview

yarn

yarn add @react-native-ohos/react-native-webview

Link

使用AutoLink的工程需要根据该文档配置，Autolink框架指导文档：https://gitcode.com/CPF-RN/ohos_react_native/blob/master/docs/zh-cn/Autolinking.md

如您使用的版本支持 Autolink，并且工程已接入 Autolink，可跳过ManualLink配置。

{
  ...
  "overrides": {
    "@rnoh/react-native-openharmony" : "./react_native_openharmony"
  }
}

"dependencies": {
    "@rnoh/react-native-openharmony": "file:../react_native_openharmony",

    "@react-native-ohos/react-native-webview": "file:../../node_modules/@react-native-ohos/react-native-webview/harmony/rn_webview.har"  
}

cd entry
ohpm install

project(rnapp)
cmake_minimum_required(VERSION 3.4.1)
set(CMAKE_SKIP_BUILD_RPATH TRUE)
set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}")
set(NODE_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../node_modules")
set(OH_MODULES "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
+set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules")
set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp")
set(LOG_VERBOSITY_LEVEL 1)
set(CMAKE_ASM_FLAGS "-Wno-error=unused-command-line-argument -Qunused-arguments")
set(CMAKE_CXX_FLAGS "-fstack-protector-strong -Wl,-z,relro,-z,now,-z,noexecstack -s -fPIE -pie")
set(WITH_HITRACE_SYSTRACE 1) # for other CMakeLists.txt files to use
add_compile_definitions(WITH_HITRACE_SYSTRACE)

add_subdirectory("${RNOH_CPP_DIR}" ./rn)

# RNOH_BEGIN: manual_package_linking_1
add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package)
+ add_subdirectory("${OH_MODULE_DIR}/@react-native-ohos/react-native-webview/src/main/cpp" ./webview)

# RNOH_END: manual_package_linking_1

file(GLOB GENERATED_CPP_FILES "./generated/*.cpp")

add_library(rnoh_app SHARED
    ${GENERATED_CPP_FILES}
    "./PackageProvider.cpp"
    "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp"
)
target_link_libraries(rnoh_app PUBLIC rnoh)

# RNOH_BEGIN: manual_package_linking_2
target_link_libraries(rnoh_app PUBLIC rnoh_sample_package)
+ target_link_libraries(rnoh_app PUBLIC rnoh_webview)
# RNOH_END: manual_package_linking_2

#include "RNOH/PackageProvider.h"
#include "SamplePackage.h"
+ #include "WebViewPackage.h"

using namespace rnoh;

std::vector<std::shared_ptr<Package>> PackageProvider::getPackages(Package::Context ctx) {
    return {
      std::make_shared<SamplePackage>(ctx),
+     std::make_shared<WebViewPackage>(ctx)
    };
}

+ import { WebView, WEB_VIEW } from "@react-native-ohos/react-native-webview"

@Builder
function buildCustomComponent(ctx: ComponentBuilderContext) {
+ if (ctx.componentName === WEB_VIEW) {
+   WebView({
+     ctx: ctx.rnComponentContext,
+     tag: ctx.tag
+   })
+ }
 ...
}
...

const arkTsComponentNames: Array<string> = [
  SampleView.NAME,
  GeneratedSampleView.NAME,
  PropsDisplayer.NAME,
+ WEB_VIEW
  ];

import type {RNPackageContext, RNPackage} from 'rnoh/ts';
import {SamplePackage} from 'rnoh-sample-package/ts';
+ import { WebViewPackage } from '@react-native-ohos/react-native-webview/ts';

export function createRNPackages(ctx: RNPackageContext): RNPackage[] {
  return [
    new SamplePackage(ctx),
+   new WebViewPackage(ctx)
  ];
}

运行

点击右上角的 sync 按钮

或者在终端执行：

cd entry
ohpm install

然后编译、运行即可。

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

在以下版本验证通过：

1. RNOH: 0.84.1; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.328 SP26;

权限要求

在 entry 目录下的 module.json5 中添加权限

"requestPermissions": [
+  {
+    "name": "ohos.permission.APPROXIMATELY_LOCATION",  // 定位权限名称
+    "reason": "$string:webview_location_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.CAMERA", // 相机权限名称
+    "reason": "$string:webview_camera_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
+  {
+    "name": "ohos.permission.MICROPHONE", // 麦克风权限名称
+    "reason": "$string:webview_microphone_reason",
+    "usedScene": {
+      "abilities": [
+        "EntryAbility"
+      ],
+      "when":"inuse"
+    }
+  },
]

在 entry 目录下添加申请以上权限的原因 打开 entry/src/main/resources/base/element/string.json，添加：

{
  "string": [
+    {
+      "name": "webview_location_reason",
+      "value": "用于网页获取地理位置"
+    },
+    {
+      "name": "webview_camera_reason",
+      "value": "用于网页访问摄像头"
+    },
+    {
+      "name": "webview_microphone_reason",
+      "value": "用于网页访问麦克风"
+    },
  ]
}

使用示例

下面的代码展示了这个库的基本使用场景：

import { WebView } from "react-native-webview";

export default function WebViewDemo() {
  return (
      <WebView source={{ uri: "https://reactnative.dev/" }} />
  );
}

使用说明

<WebView source={{ uri: "https://reactnative.dev/" }} />

属性

详情请查看webview 官方文档

事件回调

函数

静态方法

遗留问题

• webview 部分属性未实现 HarmonyOS 化issue#17
• webview 部分属性未实现 HarmonyOS 化issue#200
• V13.15.1 新增属性未实现 HarmonyOS 化issue#2
• 中文乱码issue#18

其他

目录结构

rn_webview/
├── BuildProfile.ets
├── OAT.xml
├── build-profile.json5
├── hvigorfile.ts
├── index.ets
├── oh-package.json5
├── ts.ets
└── src/
    ├── main/
    │   ├── module.json5
    │   ├── cpp/
    │   │   ├── CMakeLists.txt
    │   │   ├── WebViewPackage.h
    │   │   └── generated/
    │   │       ├── RNOH/generated/
    │   │       │   ├── BaseReactNativeWebviewPackage.h
    │   │       │   ├── components/RNCWebViewJSIBinder.h
    │   │       │   └── turbo_modules/
    │   │       │       ├── RNCWebView.cpp
    │   │       │       ├── RNCWebView.h
    │   │       │       ├── RNCWebViewModule.cpp
    │   │       │       └── RNCWebViewModule.h
    │   │       └── react/renderer/components/react_native_webview/
    │   │           ├── ComponentDescriptors.h
    │   │           ├── EventEmitters.cpp / .h
    │   │           ├── Props.cpp / .h
    │   │           ├── ShadowNodes.cpp / .h
    │   │           └── States.cpp / .h
    │   ├── ets/
    │   │   ├── Logger.ts
    │   │   ├── Magic.ets
    │   │   ├── RNCWebView.ets
    │   │   ├── RNCWebViewPackage.ets
    │   │   ├── WebViewBaseOperate.ets
    │   │   ├── WebViewTurboModule.ets
    │   │   └── generated/
    │   │       ├── index.ets
    │   │       ├── ts.ts
    │   │       ├── components/
    │   │       │   ├── RNCWebView.ts
    │   │       │   └── ts.ts
    │   │       └── turboModules/
    │   │           ├── RNCWebView.ts
    │   │           ├── RNCWebViewModule.ts
    │   │           └── ts.ts
    │   ├── resources/
    │   │   └── element/string.json （base / en_US / zh_CN）
    │   └── ...
    └── test/
        ├── List.test.ets
        └── LocalUnit.test.ets

贡献代码

使用过程中发现任何问题都可以提交 Issue，当然，也非常欢迎提交 PR 。

开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。