React-Native:显示加载屏幕,直到加载webview

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.因此webview SplashScreen在显示时开始加载.