在 Android 上渲染 WebView 时屏幕闪烁一次

I use react-native-webview在我的 React Native 应用程序中渲染 WebView。 在 iOS 上一切正常，但在 Android 上，当渲染 WebView 时，我的屏幕会闪烁（黑色，然后白色，然后显示网页）。

根据这个答案 https://stackoverflow.com/a/14346323/6111343，我尝试添加android:hardwareAccelerated="false" in the <application>我的标签AndroidManifest.xml，但这并不能解决我的问题。 （此外，它隐藏了使用创建的所有阴影效果elevation样式属性）

<DelayedComponent key={key} style={{ height: 200, ...style }}>
  <WebView
    style={{ alignSelf: "stretch" }}
    source={{ uri: /* a youtube url */ }}
    renderLoading={() => <Loading />}
    startInLoadingState={true}
    scrollEnabled={false}
  />
</DelayedComponent>

<DelayedComponent>只是一个渲染的测试组件<WebView>一秒后（使用基本的 setTimeout）。

export class DelayedComponent extends React.PureComponent<
  { delay?: number; renderLoading?: any } & ViewProps,
  { show: boolean }
> {
  constructor(props) {
    super(props);
    this.state = { show: false };
  }

  public render() {
    console.log("RENDER DELAYED", this.state);
    const loadingComp = this.props.renderLoading || (
      <Text>Just wait a second...</Text>
    );
    const { delay, renderLoading, ...forwardProps } = this.props;
    return (
      <View {...forwardProps}>
        {this.state.show ? this.props.children : loadingComp}
      </View>
    );
  }

  public async componentDidMount() {
    const delay = this.props.delay || 1000;
    await (() => new Promise(resolve => setTimeout(resolve, delay)))();
    this.setState({ show: true });
  }
}

屏幕闪烁一秒后<DelayedComponent>呈现，当<WebView>被展示。

以下是显示发生情况的视频链接：https://drive.google.com/open?id=1dX7ofANFI9oR2DFCtCRgI3_0DcsOD12B https://drive.google.com/open?id=1dX7ofANFI9oR2DFCtCRgI3_0DcsOD12B

我希望渲染 WebView 时屏幕不会闪烁，就像 iOS 设备上发生的那样。

感谢您的帮助 ！

只需将 WebView 样式的不透明度设置为 0.99 即可。

<WebView style={{ opacity: 0.99 }} />

大概与以下因素有关：Android 设备上的渲染 webview 与同一父级的先前兄弟姐妹重叠 https://stackoverflow.com/questions/52872045/rendering-webview-on-android-device-overlaps-previous-siblings-from-same-parent?answertab=votes#tab-top

编辑：将 WebView 组件包装在 View 中overflow: 'hidden': <View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View>也有效，但有时可能会因某种原因导致应用程序崩溃。