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

Question

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

根据这个答案，我尝试添加myandroid:hardwareAccelerated="false"的<application>标签AndroidManifest.xml，但这并不能解决我的问题。（此外，它隐藏了使用elevationstyle 属性创建的所有阴影效果）

<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

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

感谢您的帮助 ！

Answer 1

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

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

它可能与： 在 android 设备上呈现 webview 重叠来自同一父级的先前兄弟姐妹

编辑：包装的WebView组件在查看与overflow: 'hidden'：<View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View>也适用，但它可能会导致某种原因偶尔应用程序崩溃。