1

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

这是我到目前为止所拥有的：

  <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"/>
4

3 回答 3

1

您需要做的就是首先 setStateloading: true然后调用this.sortMatches(selectedIndex). 接受回调，如下所示：onChangesetState

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

    this.setState({
        loading: true,
        scIndex: event.nativeEvent.selectedSegmentIndex
    }, this.sortMatches(selectedIndex))
}
于 2016-10-23T16:45:47.240 回答
1

setState 的行为在React 文档中描述。从文档中引用：

setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。在调用此方法后访问 this.state 可能会返回现有值。

无法保证对 setState 的调用同步操作，并且可能会批处理调用以提高性能。

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

于 2016-10-10T02:46:29.100 回答
0

您可以在 componentDidMount 中设置您的活动指示器。然后在您获取数据后停止它。几乎与文档ActivityIndi ​​cator 中的相似

于 2016-10-10T12:14:49.050 回答