在 android 设备上渲染 webview 与来自同一父级的先前兄弟姐妹重叠 [英] Rendering webview on android device overlaps previous siblings from same parent

问题描述

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

React native 0.57 Integrated RN webview or react-native-webview@2.4.0

在模拟器上渲染所有兄弟姐妹(文本组件 1 - 3)在真实设备上，webview 与之前的兄弟视图重叠，并且它们不会被渲染.

On simulator all siblings are rendered (text component 1 - 3) On real device webview overlaps previous siblings and they are not rendered.

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 完美运行.

React native 0.56 and the webview from 0.56 works perfect.

但是从 0.57 开始，RN 集成了 webview 或用作外部依赖项似乎在 android 设备上的每个渲染中都弄乱了所有其他兄弟姐妹.

But since 0.57 the RN integrated webview or used as external dependency seems to mess all the other siblings at each render on android device.

我尝试了许多选项来使用 flex 调整样式，甚至使用 zIndex 强制显示某些视图.它们出现了，但渲染的视图仍然是一团糟.

I have tried many options to adjust styles with flex and even using zIndex to force some views to be displayed. They appear but the rendered view is still a mess.

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

I added also a question here:

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

推荐答案

向作为 webview 父级的视图添加溢出隐藏似乎解决了这个问题:

Adding overflow hidden to the view which is the parent of the webview seems to fix the issue:

        <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 的回答来自此处:

Source: Titozzz's answer from here:

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

这篇关于在 android 设备上渲染 webview 与来自同一父级的先前兄弟姐妹重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！