Question

我现在有一个组件SplashScreen，我首先渲染，然后设置状态。我想以某种方式找到一种方法如何在我的webview加载时仍然显示这个组件。我将onLoadEnd添加到我的webview中，看起来我在完成加载时收到了我的消息，问题是如果我首先加载启动画面并等待状态被更改onLoadEnd实际上永远不会被更改因为webview还没有渲染。有一个很好的方法怎么做？

Answer 1

我的解决方案实际上非常简单，WebView组件可以使用param renderLoading，这对我来说不起作用，我发现这是因为还需要定义startInLoadingState。

所以我的WebView看起来像这样：

<WebView
   ref={MY_REF}
   source={source}
   renderLoading={this.renderLoading}
   startInLoadingState
/>

Answer 2

这将是我的方法：

constructor(props){
    super(props);
    this.state = { webviewLoaded: false };
}

_onLoadEnd() {
    this.setState({ webviewLoaded: true });
}

render() {
    return(
        <View>
            {(this.state.webviewLoaded) ? null : <SplashScreen />}
            <WebView onLoadEnd={this._onLoadEnd.bind(this)} />
        </View>
    )
}

这样，webview就会被呈现，但它被放在SplashScreen后面。因此，在显示SplashScreen时，webview开始加载。

Answer 3

我遇到了类似的问题，我设法暂时解决了这个问题：

loadEnd () {
 this.setState({ webViewLoaded: true }):
}
render () {
const { webViewLoaded } = this.state;
return (<View> 
      {!webViewLoaded && <LoadingComponent /> } -- or spinner, whatever

         <WebView 
            style={(webViewLoaded) ? styles.webView : styles.loading}
            onLoadEnd={() => this.loadEnd.bind(this)} /> 
      </View);

}

const styles = StyleSheet.create({
  webView: { -- your styles ---},
  loading: {
    width: 0,
    heigt: 0
  }
});

不确定这是否对您有所帮助，但您可以尝试类似的方法。我可能会把它改成更方便的东西。不确定是否有可能动画这些更改，因为我仍然是React Native的新手。

编辑：添加隐藏微调器/加载元素

React-Native：显示加载屏幕，直到加载webview

3 个答案: