a pull to refresh component for react-native, same api on both android and ios.
npm install fw-rn-pull-to-refresh
...
getScrollMetrics = () => {
return this._listRef.getScrollMetrics()
}
...
and add this to VirtualizedList(node_modules/react-native/Libraries/Lists/VirtualizedList.js)
...
getScrollMetrics = () => {
return this._scrollMetrics
}
...
$3
import React, {PureComponent} from 'react';
import {ListView, View, Text, Dimensions} from 'react-native';
import {PullListView} from 'react-native-rk-pull-to-refresh'const width = Dimensions.get('window').width
export default class PullListViewDemo extends PureComponent {
constructor(props) {
super(props);
this.dataSource =
new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}).cloneWithRows(this.getDataSource())
}
getDataSource = () => {
let array = new Array();
for (let i = 0; i < 50; i++) {
array.push(
);
}
return array;
} render() {
return (
isContentScroll={true}
style={{flex: 1, width: width}}
onPushing={this.props.onPushing}
onPullRelease={this._onPullRelease}
dataSource={this.dataSource}
renderRow={this._renderRow}/>
)
}
_onPullRelease = () => {
setTimeout(() => {
this.pull && this.pull.resolveHandler()
}, 2000)
}
_renderRow = (rowData) => {
return (
{rowData}
}
componentDidMount() {
this.pull && this.pull.beginRefresh()
}
}
`
$3
import React, {PureComponent} from 'react';
import {View, Text, Dimensions,StyleSheet,ActivityIndicator} from 'react-native';
import {PullView} from 'react-native-rk-pull-to-refresh'const width = Dimensions.get('window').width
const topIndicatorHeight = 50
export default class PullViewDemo extends PureComponent {
render() {
return (
style={{flex: 1, width: width}}
topIndicatorRender={this.topIndicatorRender}
topIndicatorHeight={topIndicatorHeight}
onPullStateChangeHeight={this.onPullStateChangeHeight}
onPushing={this.props.onPushing}
onPullRelease={this._onPullRelease}>
这是内容
)
}
onPullStateChangeHeight = (pulling, pullok, pullrelease, moveHeight) => {
if (pulling) {
this.txtPulling && this.txtPulling.setNativeProps({style: styles.show});
this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
} else if (pullok) {
this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
this.txtPullok && this.txtPullok.setNativeProps({style: styles.show});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.hide});
} else if (pullrelease) {
this.txtPulling && this.txtPulling.setNativeProps({style: styles.hide});
this.txtPullok && this.txtPullok.setNativeProps({style: styles.hide});
this.txtPullrelease && this.txtPullrelease.setNativeProps({style: styles.show});
}
}
topIndicatorRender = () => {
return (
{this.txtPulling = c;}} style={styles.hide}>pulling...
{this.txtPullok = c;}} style={styles.hide}>pullok...
{this.txtPullrelease = c;}} style={styles.hide}>pullrelease...
);
}
_onPullRelease = () => {
setTimeout(() => {
this.pull && this.pull.resolveHandler()
}, 2000)
}
componentDidMount() {
this.pull && this.pull.beginRefresh()
}
}
const styles = StyleSheet.create({
hide: {
position: 'absolute',
left: 10000,
backgroundColor: 'transparent'
},
show: {
position: 'relative',
left: 0,
backgroundColor: 'transparent'
}
});