开发者问题收集

如何在 React Native 中使用 refreshcontrol 刷新页面

2020-07-23
684

我想使用刷新控制 API,并反映出我的代码中包含的 FlatList 在下拉页面时可以刷新。现在我编写了代码,这样它就可以刷新了,但是它却不动。您能将正确的代码添加到我的代码中吗?


fetchData = () => {
const FEED_URL = 'https://headlines.yahoo.co.jp/rss/tamahiyo-all.xml';
}


type Props = {};

type FeedItem = {
  link: Array<string>,
  title: Array<string>,
  pubDate: Array<string>,
};

type State = {
  feedItems: Array<FeedItem>,
};


const renderItem = (params: { item: FeedItem }) => (
  <TouchableOpacity onPress={() => Linking.openURL(params.item.link[0])}>
    <View style={styles.row}>
    <Text style={styles.article} >{params.item.title[0]}</Text>
    <Text style={styles.date}>{params.item.pubDate[0]}</Text>
    </View>
  </TouchableOpacity>
);

export default class App extends Component<Props, State> {
  state = {
    feedItems: [],
  }

  componentDidMount() {
    fetch(FEED_URL)
      .then(res => res.text())
      .then((xml) => {
        const parser = xml2js.Parser();
        parser.parseString(xml, (err, result) => {
          this.setState({ feedItems: result.rss.channel[0].item });
        });
      });
  }
_onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (

      <ImageBackground source={require('../image/akachan2.jpg')} style={styles.imageBackground}>
      <Text style={styles.header}>赤ちゃんにゅーす</Text>
        <FlatList
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          data={this.state.feedItems}
          renderItem={renderItem}
          keyExtractor={item => item.link[0]}
 refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
            }
        />
        </ImageBackground>
      
    );
  }
}

我认为获取函数(fetchData())不起作用,但指示器可以工作。URL 是 RSS 提要。

1个回答

您不需要在 FlatList 上使用 RefreshControl 。它默认支持下拉刷新。

<FlatList
    ItemSeparatorComponent={() => <View style={styles.separator} />}
    data={this.state.feedItems}
    renderItem={renderItem}
    keyExtractor={item => item.link[0]}
    refreshing={this.state.refreshing}
    onRefresh={this._onRefresh}
/>
Ferin Patel
2020-07-23