Question

我目前正在学习反应和反应母语。我在项目中导入了一个图像滑块，并将其包含在我的Component中，如下所示：

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

在此图像滑块上，我从json端点获取图像并填充它。它工作正常。但我想要的是理解，我怎样才能放置一个＆＃39; loading＆＃39;在加载文本或微调器时。

我尝试检查我的banners_top是否已加载到render()函数上，但它只会在加载时呈现滑块。

在我的图片滑块js上，我目前有这个：

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'
  },
});

谢谢！

Answer 1

setState将使应用程序重新呈现视图。像这样：

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

但是，您可能希望了解一下Redux，这是一个很好的方式来处理这样的东西更优雅，还有其他不错的功能。 cppreference

React Native：获取时渲染

1 个答案: