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

问题描述：

我目前有一个SplashScreen组件，我将首先渲染，直到我的状态被设置。我想以某种方式找到一种方法，如何仍然显示这个组件，而我的webview加载。我将onLoadEnd添加到了我的webview中，看起来好像当我的消息在完成加载后返回时，问题是如果我先加载splashscreen并等待状态在onEndEnd上更改，但实际上不会更改，因为webview尚未渲染。有没有一个好的方法来做到这一点？React-Native：显示加载屏幕直到加载webview

答

我的解决方案其实很简单，WebView组件可以有param renderLoading，这对我来说并不奏效，我发现这是因为还需要定义startInLoadingState。

所以我的WebView看起来在某种程度上是这样的：

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

这帮了我很多。奇迹般有效。对于renderLoading，你甚至可以使用一个箭头函数，如： 'renderLoading = {（）=> {return（}' 但是这对我也有一点小Bug如果你通过arrow-Funktion它被放置在上面，centerd 在默认本地函数： '函数renderLoading（）{ 回报（）; } '和像您所描述loadign它，它很好地centerd在中间。屏幕我不知道为什么，但也许这有助于某人节省一些时间:) – suther

谢谢，这是要走的路，或作为萨瑟评论'renderLoading = {（）=> {return（）}'但装载程序的位置与你声明或调用你的函数无关！如果你不设计你的ActivityIndicator组件，它将会出现在顶部以横向为中心。为了使ti居中verticaly也添加样式如下： '' – razbard

答

我有一个类似的问题，我设法与这个暂时解决它：

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中仍然非常新手。

编辑：增加了隐藏微调/加载部件

答

这将是我的做法：

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> 
    ) 
}

这种方式，web视图呈现，但它被放置在SplashScreen后面。因此，在显示SplashScreen时，webview开始加载。

貌似在这种情况下，我的状态不发生变化，闪屏其加载只是在屏幕的顶部。 – NinetyHH

你把WebView的源码？ –

是的，我只是将这段代码添加到我的 – NinetyHH

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

相关推荐