react-native-webview置于ScrollView下导航时App崩溃如何解决？

• 方案1：调整布局结构（最优解） #

  你当前代码中的WebView已经设置了固定高度carMapViewHeight，完全可以将WebView与ScrollView放在同一层级的Flex布局容器中，避免嵌套结构。从根源上解决WebView与ScrollView渲染销毁的冲突问题，不需要修改硬件加速相关配置，不会影响react-native-video的正常播放。

• 方案2：页面卸载前主动清空WebView内容 #

  如果业务逻辑必须嵌套WebView在ScrollView内，可以在页面销毁前主动清空WebView的加载资源，规避原生层销毁时的冲突，不需要关闭硬件加速。
  类组件示例代码：

  // 初始化state
  state = {
    carMapURL: '你的地图页面地址',
    isMapLoaded: false
  }
  
  componentWillUnmount() {
    // 卸载前清空WebView加载地址
    this.setState({
      carMapURL: ''
    })
  }
  
  // 渲染时的WebView配置
  <WebView
    useWebKit
    originWhitelist={["*"]}
    style={{ width: "100%", height: carMapViewHeight }}
    source={{ uri: this.state.carMapURL }}
    mixedContentMode="compatibility"
    onLoadEnd={() =>
      this.setState({
        isMapLoaded: true,
      })
    }
  />
  

  函数组件可以在useEffect的清理函数中执行清空地址的逻辑，效果一致。

• 方案3：升级react-native-webview到最新正式版 #

  你遇到的ScrollView嵌套WebView销毁崩溃属于旧版本react-native-webview的已知BUG，最新正式版已经修复了该问题，升级后不需要修改任何配置即可同时兼容WebView和react-native-video的正常运行。

• 方案4：单页面关闭硬件加速（仅适用于WebView与视频不在同一页面的场景） #

  如果你的react-native-video播放页面和WebView页面是两个独立页面，可以在Android原生配置的AndroidManifest.xml中，仅给承载WebView的Activity设置android:hardwareAccelerated="false"，其他页面保持硬件加速开启，两个组件就不会相互影响。

内容的提问来源于stack exchange，提问作者Bhaskar Joshi