Рендеринг веб-просмотра на устройстве Android перекрывает предыдущих братьев и сестер от того же родителя

Question

React native 0.57 Integrated RN webview или react-native-webview@2.4.0

В симуляторе отображаются все братья и сестры (текстовый компонент 1 - 3). В реальном веб-просмотре устройства перекрываются предыдущие братья и сестры, и они не отображаются.

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>
    );
  }
}

Реагирует на нативный 0,56, и веб-просмотр с 0,56 работает идеально.

Но, начиная с 0,57, RN интегрировал веб-видение или использовал его как внешнюю зависимостьпутать всех остальных братьев и сестер при каждом рендеринге на устройстве Android.

Я пробовал много вариантов настройки стилей с помощью flex и даже с использованием zIndex, чтобы заставить отображаться некоторые виды.Они появляются, но визуализированный вид все еще беспорядок.

Я добавил также вопрос здесь:

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

Answer 1

Я только что обнаружил, что этот подход может вызвать сбой на некоторых устройствах Android (протестировано на Pixel 1, Android Pie)

Эту же проблему можно исправить, установив непрозрачность 0,99 для компонента WebView <WebView style={{ opacity: 0.99 }} />

Экран мигает один раз при рендеринге WebView на Android

Answer 2

Добавление переполнения, скрытого к представлению, являющемуся родителем веб-просмотра, похоже, решает проблему:

        <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>

Источник: ответ Титозза отсюда:

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