在Android设备上渲染Webview与同一个父对象的先前同级对象重叠

Question

反应原生0.57集成RN Webview或 react-native-webview@2.4.0

在模拟器上，所有同级都被渲染（文本组件1-3）。在真实设备上，Webview与以前的同级重叠，并且不被渲染。

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来强制显示某些视图。它们出现了，但是渲染的视图仍然是一团糟。

我在这里还添加了一个问题：

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

Answer 1

将溢出隐藏添加到作为 web 视图的父级的视图似乎可以解决该问题：

        <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