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

Question

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

根据 this answer ，我尝试添加 android:hardwareAccelerated="false"在<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

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

感谢您的帮助!

Answer 1

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

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

可能与以下有关: Rendering webview on android device overlaps previous siblings from same parent

编辑:用 overflow: 'hidden' 在 View 中包装 WebView 组件: <View style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View>也有效，但由于某些原因偶尔会导致应用程序崩溃。