android - 在 Android 设备上呈现 webview 与来自同一父级的先前 sibling 重叠

Question

react native 0.57 集成 RN webview 或 react-native-webview@2.4.0

在模拟器上呈现所有 sibling (文本组件 1 - 3) 在真实设备上，webview 与之前的 sibling 重叠，并且不会呈现它们。

import React, { Component } from 'react';
import { ScrollView, View, WebView, Text } from 'react-native';

export default class MyWeb extends Component {
  render() {
    return (
      <ScrollView contentContainerStyle={{ backgroundColor: 'pink', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
        <View style={{backgroundColor: 'yellow', margin: 5, height: 60, width: 300, alignItems: 'center', justifyContent: 'center' }}>
          <Text>TEXT COMPONENT 1</Text>
        </View>
        <View style={{backgroundColor: 'yellow', height: 60, width: 300, alignItems: 'center', justifyContent: 'center' }}>
          <Text>TEXT COMPONENT 2</Text>
        </View>
        <View style={{flex: 1}}>
          <WebView
            source={{ html: '<div>COTENT OF WEBVIEW HERE</div>' }}
            // source={{ uri: 'https://infinite.red/react-native' }}
            style={{margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'}}
          />
        </View>
        <View style={{backgroundColor: 'yellow', height: 100, width: 300, alignItems: 'center', justifyContent: 'center', padding: 10 }}>
          <Text>TEXT COMPONENT 3</Text>
         </View>
      </ScrollView>
    );
  }
}

React native 0.56 和 0.56 的 webview 完美运行。

但是自 0.57 以来，RN 集成的 webview 或用作外部依赖项似乎在 android 设备上的每个渲染中都弄乱了所有其他兄弟。

我已经尝试了很多选项来使用 flex 调整样式，甚至使用 zIndex 强制显示某些 View 。它们出现了，但呈现的 View 仍然一团糟。

我在这里也添加了一个问题:

https://github.com/react-native-community/react-native-webview/issues/101

Answer 1

将隐藏的溢出添加到作为 webview 的父 View 的 View 似乎可以解决这个问题:

        <View style={{flex: 1, overflow: 'hidden'}}>
          <WebView
            source={{ html: '<div>COTENT OF WEBVIEW HERE</div>' }}
            style={{margin: 20, flex :1, height: 250, width: 300, backgroundColor: 'red'}}
          />
        </View>

来源:Titozzz 的回答来自这里:

https://github.com/react-native-community/react-native-webview/issues/101