From 31bb0c381be171812c0cfd05eae83e1410438c3e Mon Sep 17 00:00:00 2001 From: hewei Date: Thu, 23 May 2024 09:42:52 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9RH46]=20=E4=BF=AE=E6=94=B9react-n?= =?UTF-8?q?ative-webview=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-webview.md | 194 +++++++++++++++++----------------- 1 file changed, 97 insertions(+), 97 deletions(-) diff --git a/zh-cn/react-native-webview.md b/zh-cn/react-native-webview.md index b65a89e9..21570b51 100644 --- a/zh-cn/react-native-webview.md +++ b/zh-cn/react-native-webview.md @@ -1,4 +1,4 @@ -> 模板版本：v0.1.3 +> 模板版本：v0.2.1

react-native-webview

@@ -12,7 +12,7 @@

-> [!tip] [Github 地址](https://github.com/react-native-oh-library/react-native-webview) +> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-webview) ## 安装与使用 @@ -45,7 +45,13 @@ yarn add @react-native-oh-tpl/react-native-webview@file:# ```js import { WebView } from "react-native-webview"; -; +export default function WebViewDemo() { + return ( + + + + ); +} ``` ## Link @@ -61,7 +67,7 @@ import { WebView } from "react-native-webview"; 1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； 2. 直接链接源码。 -方法一：通过 har 包引入 +方法一：通过 har 包引入（推荐） > [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 @@ -69,8 +75,8 @@ import { WebView } from "react-native-webview"; ```json "dependencies": { - "rnoh": "file:../rnoh", - "rnoh-webview": "file:../../node_modules/@react-native-oh-tpl/react-native-webview/harmony/rn_webview.har" + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-webview": "file:../../node_modules/@react-native-oh-tpl/react-native-webview/harmony/rn_webview.har" } ``` @@ -87,110 +93,90 @@ ohpm install > [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 -打开 `entry/oh-package.json5`，添加以下依赖 +把`tester/node_modules/@react-native-oh-tpl//harmony/`目录下的源码``复制到`harmony`工程根目录下 + +在`harmony`工程根目录的 `build-profile.template.json5` 添加以下模块 ```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-webview": "file:../../node_modules/@react-native-oh-tpl/react-native-webview/harmony/rn_webview" +modules:[ + ... + { + name: 'rn_webview', + srcPath: './rn_webview', } +] ``` -打开终端，执行： +进入到`harmony`工程目录并输入以下命令： + + + +**npm** ```bash -cd entry -ohpm install --no-link +npm install ``` -### 配置 CMakeLists 和引入 WebViewPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： +**yarn** -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-webview/src/main/cpp" ./webview) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_webview) -# RNOH_END: link_packages +```bash +yarn add ``` -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： + -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "WebViewPackage.h" +打开 `entry/oh-package.json5`，添加以下依赖 -using namespace rnoh; +```json +"dependencies": { + "@rnoh/react-native-openharmony": "file:../react_native_openharmony", + "@react-native-oh-tpl/react-native-webview": "file:../rn_webview" + } +``` -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} +点击右上角的 `sync` 按钮 + +或者在终端执行： + +```bash +cd entry +ohpm install ``` -### 在 ArkTs 侧引入 webview 组件 +### 在 ArkTs 侧引入 RNCWebView组件 -找到 **function buildCustomComponent()**，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： +找到 `function buildCustomRNComponent()`，一般位于 `entry/src/main/ets/pages/index.ets` 或 `entry/src/main/ets/rn/LoadBundle.ets`，添加： ```diff -+ import { WebView, WEB_VIEW } from "rnoh-webview" +... ++ import { RNCWebView } from '@react-native-oh-tpl/react-native-webview'; @Builder -function buildCustomComponent(ctx: ComponentBuilderContext) { - if (ctx.componentName === SAMPLE_VIEW_TYPE) { - SampleView({ - ctx: ctx.rnComponentContext, - tag: ctx.tag, - buildCustomComponent: buildCustomComponent - }) - } -+ else if (ctx.componentName === WEB_VIEW) { -+ WebView({ -+ ctx: ctx.rnComponentContext, -+ tag: ctx.tag -+ }) -+ } - ... +export function buildCustomRNComponent(ctx: ComponentBuilderContext) { +... ++ if (ctx.componentName === RNCWebView.NAME) { ++ RNCWebView({ ++ ctx: ctx.rnComponentContext, ++ tag: ctx.tag, ++ }) ++ } +... } ... ``` -### 在 ArkTs 侧引入 WebViewPackage +### 在 ArkTs 侧引入 RNCWebViewPackage 打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： ```diff -import type {RNPackageContext, RNPackage} from 'rnoh/ts'; -import {SamplePackage} from 'rnoh-sample-package/ts'; -+ import { WebViewPackage } from 'rnoh-webview/ts'; +... ++ import { RNCWebViewPackage } from '@react-native-oh-tpl/react-native-webview/ts'; export function createRNPackages(ctx: RNPackageContext): RNPackage[] { return [ new SamplePackage(ctx), -+ new WebViewPackage(ctx) ++ new RNCWebViewPackage(ctx) ]; } ``` @@ -210,11 +196,17 @@ ohpm install ## 约束与限制 -## 兼容性 +### 兼容性 要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-webview Releases](https://github.com/react-native-oh-library/react-native-webview/releases) +请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-webview Releases](https://github.com/react-native-oh-library/react-native-webview/releases) + +本文档内容基于以下版本验证通过： + +1. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18； IDE：DevEco Studio 5.0.3.200; ROM：3.0.0.18; +2. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview0 B.0.60；IDE：DevEco Studio 5.0.3.200；ROM：3.0.0.18； +3. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Preview2 B.0.73；IDE：DevEco Studio 5.0.3.200；ROM：3.0.0.18； ## 属性 @@ -228,25 +220,33 @@ ohpm install > [!tip] "鸿蒙支持"列为 yes 的属性表示支持鸿蒙平台，并且效果对标"原库平台"列中的 ios 或 android 的效果。 -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | -| `source` | Loads static HTML or a URI (with optional headers) in the WebView | object | yes | All | partially (Only of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl) | -| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | -| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | -| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | -| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | -| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | -| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android and harmony. | boolean | No | android | yes | -| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | -| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | -| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | -| `textZoom?` | If the user has set a custom font size in the Android and harmony system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | -| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | -| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | -| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | -| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| -------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | ---------------------------------------------------------------------------------------------------------------- | +| `source` | Loads static HTML or a URI (with optional headers) in the WebView | object | yes | All | partially (Only of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl) | +| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | +| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | +| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | +| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | +| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | +| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android and harmony. | boolean | No | android | yes | +| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | +| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | +| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | +| `textZoom?` | If the user has set a custom font size in the Android and harmony system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | +| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | +| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | +| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | +| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | +| `reload?` | Reloads the current page. | function | No | iOS,android,macOS | yes | +| `stopLoading?` | Stop loading the current page. | function | No | iOS,android,macOS | yes | +| `goBack?`: () => void | Go back one page in the web view's history. | function | No | iOS,android,macOS | yes | +| `goForward?`: () => void | Go forward one page in the web view's history. | function | No | iOS,android,macOS | yes | +| `requestFocus?`: () => void | Request the webView to ask for focus. | function | No | iOS,android,macOS | yes | +| `clearCache?`: (includeDiskFiles: boolean) => void | Clears the resource cache. | function | No | iOS,android,macOS | yes | +| `clearHistory?`: () => void | Tells this WebView to clear its internal back/forward list. | function | No | android | yes | +| `loadUrl?`: (url: string) => void | Loads a specified URL. | function | No | - | yes | ## 遗留问题 -- Gitee