diff --git a/vmall/react-native-webview.md b/vmall/react-native-webview.md index ba5b7eedb2d385da1d3d8c08417c63241453128c..87c186bde30374a261fa6ff6a52a6eb5a00112e8 100644 --- a/vmall/react-native-webview.md +++ b/vmall/react-native-webview.md @@ -1,4 +1,5 @@ -> 模板版本:v0.1.1 +> 模板版本:v0.1.2 +

react-native-webview

@@ -11,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) ## 安装与使用 @@ -190,6 +191,8 @@ ohpm install 然后编译、运行即可。 +## 约束与限制 + ## 兼容性 要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 @@ -198,32 +201,39 @@ ohpm install ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。 + 详情请查看[webview 官方文档](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) 如下是 webview 已经鸿蒙化的属性: -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ----------------- | -------- | -| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | -| `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. | 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 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 | +> [!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 | ## 遗留问题 -- [ ] webview部分属性未实现鸿蒙化[issue#17](https://github.com/react-native-oh-library/react-native-webview/issues/17) + +- [ ] webview 部分属性未实现鸿蒙化[issue#17](https://github.com/react-native-oh-library/react-native-webview/issues/17) - [ ] 中文乱码[issue#18](https://github.com/react-native-oh-library/react-native-webview/issues/18) ## 其他