Question

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

根据this answer，我试图在android:hardwareAccelerated="false"的{{1}}标签中添加<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>只是一个测试组件，在一秒钟后（使用基本setTimeout）呈现<DelayedComponent>。

<WebView>

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>渲染后闪烁一秒钟。

这里是指向显示发生an昧事件的视频的链接：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 style={{flex: 1, overflow: 'hidden'}}><WebView ... /></View>包装在View中的WebView组件也可以，但是由于某种原因它有时可能导致应用程序崩溃。

Answer 2

此技巧对我有用，至少用户看不到这0.5秒之间的闪烁

<WebView
    onLoadStart={event => {
      setTimeout(() => {
        this.setState({ webViewHasLoadedContent: true })
      }, 500)
    }}
    style={{
      opacity: this.state.webViewHasLoadedContent ? 1 : 0,
    }}
  />

Answer 3

我进入 Flutter 以避免在键盘出现时调整大小，所以我添加了支架小部件：

  resizeToAvoidBottomInset: false,

如果您使用不同的框架，请尽量避免调整键盘大小。

祝你好运，编码愉快！

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

3 个答案: