reactjs - 如何使用refreshControl在React Native ScrollView中刷新？

Question

现在我想下拉一个scrollView并刷新这个组件，所以我遵循了react-native中提到onRefresh和RefreshContorol的官方文档。

但是，我不知道为什么我的代码不起作用并出现错误...

下面的代码是我的代码。

   <View style={styles.container}>
    <ScrollView
      contentContainerStyle={{ flexDirection: 'row', flexWrap: 'wrap' }}
      refreshControl={<RefreshControl refreshing={this.state.refreshing}  onRefresh={this.setState({ refreshing: true })} />}
    >
      {this.renderItemBox()}
    </ScrollView>
  </View>

Answer 1

下面是示例代码，您可以在其中找到 RefreshController 与 ScrollView 的集成:

import { ScrollView, RefreshControl } from 'react-native';

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
    );
  }

}