WebView 不一致地显示白屏 react-native答案

【问题标题】：WebView inconsistently showing white screen react-nativeWebView 不一致地显示白屏 react-native
【发布时间】：2020-11-07 14:45:30
【问题描述】：

我正在使用 WebView 在我的 react-native 应用程序中显示 twitch-stream 的 iframe，但是在某些时候它呈现 WebView 仅显示为空白屏幕，直到您滚动/移动 UI 和在其他时候，它按预期工作。 WebView 为空白时不会发出任何错误，它似乎按预期加载，所以不确定为什么它只显示空白屏幕。

这里是 WebView 代码：

 <Animated.View
   style={{
     height: anim,
     width: width,
     overflow: 'hidden',
   }}
 >
   <WebView
     onLoadEnd={() => {
       useAnimation()
     }}
     source={{
       uri: `https://host.com/iframe/?channel=${channelName}`,
     }}
     style={{
       height: heightByRatio,
       width: width,
       flex: 0,
     }}
     mediaPlaybackRequiresUserAction={false}
     allowsInlineMediaPlayback={true}
   />
</Animated.View>

【问题讨论】：

标签： react-native webview

【解决方案1】：

我有一个非常相似的 webviews 问题，有时在 android 设备上加载空白。我不能说我弄清楚它发生的原因，但我通过延迟 webview 的加载并在包装 webview 的容器周围放置一个 2px 边框来解决它。两种解决方案都不能单独工作，两者都需要。

export default class WebviewExample extends Component<Props> {

    constructor(props) {
        super(props);
        this.state = {};
        
    }
    
    componentDidMount() {
        setTimeout(() => {
            this.setState({loadWebview: true});
        });
    }


    render() {
        return (
            <View style={styles.view}>
                {this.state.loadWebview && 
                    <WebView />
                }
               
            </View>
        );
    }
}

const styles = StyleSheet.create({
    
    view: {
        borderWidth: 2,
        borderColor: 'transparent',
    }

});

【讨论】：