使用 <HTML /> 呈现 iframe 时，Android 在导航回堆栈屏幕时崩溃

Question

当在 react-native-screens 中启用屏幕并且有一个屏幕呈现 <HTML /> 组件并通过 iframe HTML 元素时，应用程序在按下后退键时崩溃按钮 return 到主屏幕。 Full reproduction here.

环境

React Native：0.61.5
react-native-render-html: 4.2.2
react-native-webview: 10.3.2
react-native-screens: 2.8.0
react-native-render-html-table-bridge: 0.6.1

崩溃日志

07-29 17:41:49.173  6901  6901 F crashpad: dlopen: dlopen failed: library "libandroidicu.so" not found: needed by /system/lib/libharfbuzz_ng.so in namespace (default)
--------- beginning of crash
07-29 17:41:49.176  6410  6441 F libc    : Fatal signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c in tid 6441 (RenderThread), pid 6410 (com.newmednav)
07-29 17:41:49.340  6904  6904 F DEBUG   : *** *** *** *** *** *** *** *** *** *** *** *** *** *** *** ***
07-29 17:41:49.340  6904  6904 F DEBUG   : Build fingerprint: 'google/sdk_gphone_x86_arm/generic_x86_arm:11/RPB2.200611.009/6625208:userdebug/dev-keys'
07-29 17:41:49.340  6904  6904 F DEBUG   : Revision: '0'
07-29 17:41:49.340  6904  6904 F DEBUG   : ABI: 'x86'
07-29 17:41:49.340  6904  6904 F DEBUG   : Timestamp: 2020-07-29 17:41:49+0545
07-29 17:41:49.340  6904  6904 F DEBUG   : pid: 6410, tid: 6441, name: RenderThread  >>> com.newmednav <<<
07-29 17:41:49.340  6904  6904 F DEBUG   : uid: 10152
07-29 17:41:49.340  6904  6904 F DEBUG   : signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault addr 0x1c
07-29 17:41:49.340  6904  6904 F DEBUG   : Cause: null pointer dereference
07-29 17:41:49.340  6904  6904 F DEBUG   :     eax efbc2cb0  ebx eed5c69c  ecx eed52a80  edx 00000000
07-29 17:41:49.341  6904  6904 F DEBUG   :     edi d139ae90  esi 00000000
07-29 17:41:49.341  6904  6904 F DEBUG   :     ebp c086ed48  esp c086eb50  eip ee698c1c
07-29 17:41:49.425  6904  6904 F DEBUG   : backtrace:
07-29 17:41:49.425  6904  6904 F DEBUG   :       #00 pc 00247c1c  /system/lib/libhwui.so (android::uirenderer::skiapipeline::GLFunctorDrawable::onDraw(SkCanvas*)+1548) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #01 pc 00303a57  /system/lib/libhwui.so (SkDrawable::draw(SkCanvas*, SkMatrix const*)+87) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #02 pc 002f4606  /system/lib/libhwui.so (SkBaseDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+38) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #03 pc 00659291  /system/lib/libhwui.so (SkGpuDevice::drawDrawable(SkDrawable*, SkMatrix const*, SkCanvas*)+353) (BuildId: 434a9b68672e1dd2b15599730362463d)
07-29 17:41:49.425  6904  6904 F DEBUG   :       #04 pc 002d9dc0  /system/lib/libhwui.so (SkCanvas::onDrawDrawable(SkDrawable*, SkMatrix const*)+48) (BuildId: 434a9b68672e1dd2b15599730362463d)

Answer 1

这是由于 react-native-webview 和 react-native-screens 之间的不兼容造成的，如果您使用 @react-navigation/* 包，则必须依赖它。

编辑：此后似乎出现了倒退。 It's being tracked here.

已在 `react-native-screens@2.12.0`

中修复

请参阅 https://github.com/software-mansion/react-native-screens/releases/tag/2.12.0

中的变更日志

如果无法升级 react-native-screens

有 3 个解决方法：

WebView 不透明度

const tagsStyles = {
    iframe: {
        opacity: 0.99
    },
    // If you are using @native-html/table-plugin
    table: {
        opacity: 0.99
    }
}

并在渲染时使用这个道具：

return <HTML tagsStyles={tagsStyles} ... />

禁用硬件加速

在android/app/src/main/AndroidManifest.xml中：

<activity
  android:hardwareAccelerated="false"
/>

禁用本机屏幕

来自您的 App.js 文件：

// import {enableScreens} from 'react-native-screens';

// enableScreens();

Answer 2

另一个修复是在导航选项中禁用反应导航的动画。

static navigationOptions = () => ({
  animationEnabled: false,
});

Answer 3

另一种解决方法是在 htmlProps 内的 webViewProps 中添加 androidLayerType: 'software'，然后传递给渲染 HTML table，如下所述。

const webViewProps = {
    androidLayerType: 'software',
  }

  const htmlProps = {
    WebView,
    renderers: {
      table: TableRenderer,
    },
    renderersProps: {
      table: {
        cssRules,
        webViewProps,
        computeContainerHeight() {
          return null
        },
      },
    },
    customHTMLElementModels: {
      table: tableModel,
    },
  }

https://github.com/react-navigation/react-navigation/issues/6960#issuecomment-587418809

Answer 4

更新后的解决方案是 androidLayerType="software"，因为 androidHardwareAccelerationDisabled 现已弃用。

例如：-

<AutoHeightWebView
   androidHardwareAccelerationDisabled // update here androidLayerType="software"
   ...
/>

使用 <HTML /> 呈现 iframe 时，Android 在导航回堆栈屏幕时崩溃

When rendering iframes with <HTML />, Android crashes while navigating back to stack screen

react-native

react-native-render-html