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

Posted 2023-03-14

【中文标题】WebView 不一致地显示白屏 react-native

【英文标题】：WebView inconsistently showing white screen 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>

【参考方案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',
    

);