如何在 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