import RefreshListView, { RefreshState } from "react-native-refresh-list-view";
render部分
renderCell = item => {
return (
<TouchableOpacity>
<QuotationCell cellData={item} />
</TouchableOpacity>
);
};
renderSeparator = () => {
return (
<View style={{ backgroundColor: "white" }}>
<View
style={{
height: 0.6,
backgroundColor: "#E9E9E9",
marginLeft: "5%",
marginRight: "5%"
}}
/>
</View>
);
};
renderHeader = () => {
return <QuotationHeader />;
};
render() {
const { sourceData, refreshState } = this.state;
return (
<View style={styles.list}>
<RefreshListView
data={sourceData}
refreshState={refreshState}
ItemSeparatorComponent={() => this.renderSeparator()}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => this.renderCell(item)}
ListHeaderComponent={this.renderHeader}
onHeaderRefresh={this.onHeaderRefresh}
onFooterRefresh={this.onFooterRefresh}
/>
</View>
);
}
onRefresh部分
static defaultProps = {
data: []
};
constructor(props) {
super(props);
this.state = {
sourceData: [],
refreshState: RefreshState.Idle
};
}
componentDidMount = () => {
const { data } = this.props;
this.setState({
sourceData: data
});
};
onHeaderRefresh = () => {
this.setState({
refreshState: RefreshState.HeaderRefreshing
});
const timer = setTimeout(() => {
this.setState({
refreshState: RefreshState.Idle
});
clearTimeout(timer);
}, 1500);
};
onFooterRefresh = () => {
this.setState({
refreshState: RefreshState.FooterRefreshing
});
const timer = setTimeout(() => {
this.setState({
refreshState: RefreshState.Idle
});
clearTimeout(timer);
}, 1500);
};
setTimeout定时器使用
注意及时清除定时器clearTimeout(timer);
const timer = setTimeout(() => {
this.setState({
refreshState: RefreshState.Idle
});
clearTimeout(timer);
}, 1500);