Question

现在，我想下拉一个scrollView并刷新此组件，因此我遵循了官方文档中提到的本机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

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

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}
          />
        }
      />
    );
  }

}

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

1 个答案: