Question

所以我使用的是React native和Realm。基本上我想在Realm查询开始之前显示一个指标，然后在它完成时隐藏它。但该指标似乎没有出现。我对React原生的理解还是新的！

这是我到目前为止所做的：

  <SegmentedControlIOS 
    values={['Matched', 'Last Active', 'Distance', 'Age']}
    momentary={false}
    tintColor={'#DB4C2C'}
    style={{
      width: width,
      marginTop: 10
    }}
    selectedIndex={this.state.scIndex}
    onValueChange={(value) => {}}
    onChange={(event) => {
      console.log("CHANGE")
      var selectedIndex = event.nativeEvent.selectedSegmentIndex;

      this.sortMatches(selectedIndex)
      this.setState({
        scIndex: event.nativeEvent.selectedSegmentIndex
      })
    }}/>


  sortMatches(index) {
    this.setState({loading: true})

    var sortMatches = null;

    if (index == 0) {
      sortedMatches = this._sort_matched()
    } else if (index == 1) {
      sortedMatches = this._sort_last_active()
    } else if (index == 3) {
      sortedMatches = this._sort_birthdate()
    }

    let dataSource = ds.cloneWithRows(sortedMatches)
    this.setState({dataSource: dataSource, loading: false})
  }

  <ActivityIndicator
    animating={this.state.loading}
    style={[styles.centering, {height: 30, paddingTop: 20}]}
    size="small"/>

Answer 1

React docs中描述了setState的行为。引自文档：

setState（）不会立即改变this.state但会创建一个   待定状态转换。调用后访问this.state   方法可以返回现有值。

无法保证对setState的调用同步操作   并且可以批量调用以获得性能提升。

在您的示例中，通过setState的挂起状态转换稍后运行。

Answer 2

您需要做的只是FIRST setState loading: true，然后在this.sortMatches(selectedIndex)中调用onChange。 setState接受回调，如下所示：

onChange={(event) => {
    console.log("CHANGE")
    var selectedIndex = event.nativeEvent.selectedSegmentIndex;

    this.setState({
        loading: true,
        scIndex: event.nativeEvent.selectedSegmentIndex
    }, this.sortMatches(selectedIndex))
}

Answer 3

您可以在componentDidMount中设置活动指示器。然后，在您获取数据后停止它。几乎与文档ActivityIndicator

中的相似

React Native setState不更新 - 在函数中调用两次。等待直到完成更新

3 个答案: