Skip to content

Latest commit

 

History

History
124 lines (85 loc) · 12.1 KB

react-native-autoheight-webview.md

File metadata and controls

124 lines (85 loc) · 12.1 KB

模板版本：v0.2.2

react-native-autoheight-webview

Supported platforms License

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-autoheight-webview Releases 。对于未发布到npm的旧版本，请参考安装指南安装tgz包。

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

npm

npm install @react-native-oh-tpl/react-native-autoheight-webview

yarn

yarn add @react-native-oh-tpl/react-native-autoheight-webview

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

[!WARNING] 使用时 import 的库名不变。

import React from "react";
import AutoHeightWebView from "react-native-autoheight-webview";
import { Dimensions } from 'react-native'


export function WebviewExample() {
  return (
    <AutoHeightWebView
    style={{ width: Dimensions.get('window').width - 15, marginTop: 35,}}
    customScript={`document.body.style.background = 'lightyellow';`}
    customStyle={`
      * {
        font-family: 'Times New Roman';
      }
      p {
        font-size: 16px;
      }
    `}
    source={{ html: `
    <p style="font-weight: 400;font-style: normal;font-size: 21px;line-height: 1.58;letter-spacing: -.003em;">Tags are great for describing the essence of your story in a single word or phrase, but stories are rarely about a single thing. <span style="background-color: transparent !important;background-image: linear-gradient(to bottom, rgba(146, 249, 190, 1), rgba(146, 249, 190, 1));">If I pen a story about moving across the country to start a new job in a car with my husband, two cats, a dog, and a tarantula, I wouldn’t only tag the piece with “moving”. I’d also use the tags “pets”, “marriage”, “career change”, and “travel tips”.</span></p>
     ` }}
    
  />
  
  );
}

Link

本库 HarmonyOS 侧实现依赖@react-native-oh-tpl/react-native-webview 的原生端代码，如已在 HarmonyOS 工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-oh-tpl/react-native-webview 文档进行引入

约束与限制

兼容性

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

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息： @react-native-oh-tpl/react-native-autoheight-webview Releases

属性

[!TIP] "Platform"列表示该属性在原三方库上支持的平台。

[!TIP] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

Name Description Type Required Platform HarmonyOS Support
source Loads static HTML or a URI
(with optional headers)
in the WebView		 object Yes iOS,Android partially (Only of:
Load uri :
uri
headers
Static HTML :
html
baseUrl )
originWhitelist? List of origin strings
to allow being navigated to.		 string[] No iOS,Android no
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
customScript? - string No iOS,Android yes
style? A style object that allow you
to customize the WebView style.		 Style No iOS,Android yes
customStyle? The custom css content
will be added to the page's .		 string No iOS,Android yes
onSizeUpdated? Either updated height or width
will trigger onSizeUpdated.		 function No iOS,Android yes
showsHorizontalScrollIndicator? Boolean value that
determines whether a
horizontal scroll indicator
is shown in the WebView.		 boolean No iOS,Android yes
showsVerticalScrollIndicator Boolean value that
determines whether a
vertical scroll indicator
is shown in the WebView.		 boolean No iOS,Android yes
files? Using local or remote files.
To add local files:
Add files to
android/app/src/main/assets/
(depends on baseUrl)
on android;
add files to
web/ (depends on baseUrl) on iOS;
add files to
harmony/entry/src/
main/resoureces/rawfile
on harmony.		 arrayOf(
{ href: string,
type: string,
rel:string })		 No iOS,Android yes
scrollEnabledWithZoomedin? Making the webview scrollable
on iOS when zoomed in even
if scrollEnabled is false.		 boolean No iOS yes
viewportContent? Please note that
'width=device-width'
with scalesPageToFit
may cause some layout issues
on Android and harmony,
for these conditions,
using customScript prop
to apply custom viewport meta.		 string No iOS,Android yes

遗留问题

  • AutoHeightWebview 的originWhitelist属性依赖webview的originWhitelist属性暂未实现HarmonyOS 化issue#200
  • AutoHeightWebview 的source属性依赖webview的source属性只是部分实现HarmonyOS 化issue#200
  • AutoHeightWebview依赖的webview 部分属性未实现 HarmonyOS 化issue#17
  • AutoHeightWebview 的scrollEnabledWithZoomedin属性未实现 HarmonyOS 化issue#1
  • 中文乱码issue#2

其他

开源协议

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