Android 设备上的渲染 webview 与同一父级的先前兄弟姐妹重叠

反应本机 0.57 集成 RN webview 或[email protected] /cdn-cgi/l/email-protection

在模拟器上，所有同级都会被渲染（文本组件 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 调整样式，甚至使用 z Index 来强制显示某些视图。它们出现了，但渲染视图仍然一团糟。

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

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

将溢出隐藏添加到作为 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 https://github.com/react-native-community/react-native-webview/issues/101