fix: update rn rich text height on load again (#10807)

NervJS · Dec 3, 2021 · a36994e · a36994e
1 parent 1c207fe
commit a36994e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 0 deletions.
diff --git a/packages/taro-components-rn/__tests__/__snapshots__/richText.spec.tsx.snap b/packages/taro-components-rn/__tests__/__snapshots__/richText.spec.tsx.snap
@@ -28,13 +28,15 @@ exports[`RichText RichText render 1`] = `
             document.body.style.padding = 0;
             document.body.style.margin = 0;
             window.ReactNativeWebView.postMessage(document.body.scrollHeight);
+            true;
           "
       injectedJavaScriptBeforeContentLoadedForMainFrameOnly={true}
       injectedJavaScriptForMainFrameOnly={true}
       javaScriptEnabled={true}
       messagingEnabled={true}
       onContentProcessDidTerminate={[Function]}
       onHttpError={[Function]}
+      onLoadEnd={[Function]}
       onLoadingError={[Function]}
       onLoadingFinish={[Function]}
       onLoadingProgress={[Function]}

diff --git a/packages/taro-components-rn/src/components/RichText/index.tsx b/packages/taro-components-rn/src/components/RichText/index.tsx
@@ -21,6 +21,8 @@ class _RichText extends React.Component<RichTextProps, RichTextState> {
     webViewHeight: 0
   }
 
+  private webview = React.createRef<WebView>()
+
   renderChildrens = (arr: Array<any> = []): JSX.Element[] | undefined => {
     if (arr.length === 0) return
     return arr.map((list) => {
@@ -76,6 +78,7 @@ class _RichText extends React.Component<RichTextProps, RichTextState> {
         width: '100%',
       }, style)}>
         <WebView
+          ref={this.webview}
           source={{ html: '<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>' + html }}
           scalesPageToFit={false}
           onMessage={this.onWebViewMessage}
@@ -85,7 +88,9 @@ class _RichText extends React.Component<RichTextProps, RichTextState> {
             document.body.style.padding = 0;
             document.body.style.margin = 0;
             window.ReactNativeWebView.postMessage(document.body.scrollHeight);
+            true;
           `}
+          onLoadEnd={() => this.webview.current?.injectJavaScript('window.ReactNativeWebView.postMessage(document.body.scrollHeight);')} // android
           style={{
             backgroundColor: 'transparent'
           }}