From e7f1f2e5988647c4b2066889de85a9b76d41098c Mon Sep 17 00:00:00 2001 From: 17691002584 <17691002584@163.com> Date: Fri, 24 May 2024 18:20:13 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issues:=20#I9RZEH]=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9react-native-webview=E6=8C=87=E5=AF=BC=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-webview.md | 69 ++++++++++++++++++++++------------- 1 file changed, 44 insertions(+), 25 deletions(-) diff --git a/zh-cn/react-native-webview.md b/zh-cn/react-native-webview.md index 154d71fd..0050e505 100644 --- a/zh-cn/react-native-webview.md +++ b/zh-cn/react-native-webview.md @@ -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 @@ -96,14 +102,14 @@ ohpm install 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(OH_MODULE "${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) ++ add_subdirectory("${OH_MODULE}/rnoh-webview/src/main/cpp" ./webview) # RNOH_END: add_package_subdirectories add_library(rnoh_app SHARED @@ -152,7 +158,7 @@ function buildCustomComponent(ctx: ComponentBuilderContext) { buildCustomComponent: buildCustomComponent }) } -+ else if (ctx.componentName === WEB_VIEW) { ++ if (ctx.componentName === WEB_VIEW) { + WebView({ + ctx: ctx.rnComponentContext, + tag: ctx.tag @@ -201,6 +207,10 @@ ohpm install 请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[ @react-native-oh-tpl/react-native-webview Releases](https://github.com/react-native-oh-library/react-native-webview/releases) +本文档内容基于以下版本验证通过： + +RNOH: 0.72.26; SDK: HarmonyOS NEXT Developer Beta1 B.0.18; IDE: DevEco Studio 5.0.3.300; ROM: 3.0.0.22; + ## 属性 > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -213,30 +223,39 @@ 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 | +| `incognito?` | Does not store any data within the lifetime of the WebView. | boolean | NO | All | yes | ## 遗留问题 -- [ ] webview 部分属性未实现鸿蒙化[issue#17](https://github.com/react-native-oh-library/react-native-webview/issues/17) -- [x] 中文乱码[issue#18](https://github.com/react-native-oh-library/react-native-webview/issues/18) +- [ ] webview 部分属性未实现鸿蒙化[issue#17](https://github.com/react-native-oh-library/react-native-webview/issues/17) +- [X] 中文乱码[issue#18](https://github.com/react-native-oh-library/react-native-webview/issues/18) ## 其他 -- Gitee