React Native: Render bei Abruf

Question

Ich lerne gerade reagieren & reagieren native. Ich importierte an meinem Projekt ein Bild Schieber und schließt es auf meine Komponente wie folgt aus:

render() { 
    return (
      <TopScreen style={styles.viewpager}/> 
    ); 
    } 

Auf diesem Bild Schieber, ich Bilder von meinem json Endpunkt holen und füllt es. Es funktioniert gut. Aber was ich möchte, ist zu verstehen, wie kann ich einen "Lade" -Text oder einen Spinner darauf legen, während es geladen wird.

Ich habe versucht zu überprüfen, ob meine banners_top bereits auf die render()-Funktion geladen wurde, aber es rendert nur den Schieberegler, wenn es geladen ist.

Auf meinem Image Slider js, habe ich dies derzeit:

var TopScreen = React.createClass({ 

    componentWillMount : function() { 

     fetch('http://example.org/myendpoint') 
     .then((response) => response.json()) 
     .then((responseJson) => { 

      var data = responseJson.top; 
      var dataSource = new ViewPager.DataSource({ 
      pageHasChanged: (p1, p2) => p1 !== p2, 
      }); 

      var setIt = dataSource.cloneWithPages(data); 

      this.setState({banners_top : setIt}); 

     }) 
     .catch((error) => { 
      console.error(error); 
     }); 
    }, 

    getInitialState: function() { 
    return { 
     banners_top: null 
    }; 
    }, 

    render: function() { 

    if(!this.state.banners_top) { 
     return (
     <View> 
      <Text>lucas!</Text> 
     </View> 
    ); 
    } 
    else { 
     return (
      <ViewPager 
      style={this.props.style} 
      dataSource={this.state.banners_top} 
      renderPage={this._renderPage}/> 
    ); 
    } 



    }, 

    _renderPage: function(
    data: Object, 
    pageID: number | string,) { 
    return (
     <Image 
     source={{uri: data.banner.image}} 
     style={styles.page} /> 
    ); 
    }, 
}); 

var styles = StyleSheet.create({ 
    page: { 
    width: deviceWidth, 
    height: 240, 
    resizeMode: 'contain' 
    }, 
}); 

Dank!

Answer 1

setState lässt die App die Ansicht rendern. So:

componentWillMount() { 
    this.setState({ showLoading: true}); 

    fetch('http://someUrl.com/api/xxx') 
    .then(result.json()) 
    .then((json) => { 
     this.setState({ showLoading: false }); 
     ... 
     } 
    }) 
} 
render() { 
    if(this.state.showLoading === true) { 
     render your header/spinner... 
    } 
    ... 
} 

aber Sie könnten in Redux aussehen wollen, dann ist es eine schöne Art, Sachen wie diese ein wenig mehr elegant zu handhaben, und es hat andere nette Features. Read about redux her