在Android上渲染WebView时，屏幕闪烁一次 [英] Screen blinks once when rendering a WebView on Android

问题描述

我使用react-native-webview在我的React Native应用程序中呈现WebView. 在iOS上一切正常，但是在Android上，渲染WebView时，我的屏幕闪烁(先黑后白，然后显示网页).

I use react-native-webview to render a WebView in my React Native app. All works fine on iOS, but on Android, when the WebView is rendered, my screen blinks (black, then white, then display the web page).

根据此答案，我试图在AndroidManifest.xml的<application>标记中添加android:hardwareAccelerated="false" ，但这并不能解决我的问题. (此外，它会隐藏使用elevation样式属性创建的所有阴影效果)

According to this answer, I tried to add android:hardwareAccelerated="false" in the <application> tag of my AndroidManifest.xml, but that doesn't solve my problem. (Also, it hides all shadow effects created with elevation style property)

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

<DelayedComponent>只是一个测试组件，在一秒钟后(使用基本setTimeout)呈现<WebView>.

<DelayedComponent> is just a test component that renders the <WebView> after one second (using a basic 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 });
  }
}

当显示<WebView>时，屏幕在<DelayedComponent>渲染后闪烁一秒钟.

The screen blinks one second after the <DelayedComponent> renders, when the <WebView> is displayed.

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

Here is a link to a video showing whan happens : https://drive.google.com/open?id=1dX7ofANFI9oR2DFCtCRgI3_0DcsOD12B

我希望呈现WebView时屏幕不会闪烁，就像在iOS设备上一样.

I expect that the screen doesn't blink when the WebView is rendered, like it happens on iOS devices.

谢谢您的帮助！

推荐答案

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

Just set opacity to WebView style to 0.99.

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

它可能与以下内容有关: 呈现Webview在android设备上与同一父级的先前同级项重叠

It's probably related with: Rendering webview on android device overlaps previous siblings from same parent

使用overflow: 'hidden'包装View中的WebView组件:<View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View>也可以，但是由于某些原因它有时可能导致应用程序崩溃.

Wrapping WebView component in View with overflow: 'hidden': <View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View> also works but it can result in occasionally application crashes for some reason.

这篇关于在Android上渲染WebView时，屏幕闪烁一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！