ss_rn_native_pull_refresh

安装

npm install @shenorg/ss_rn_native_pull_refresh -S

或

yarn add @shenorg/ss_rn_native_pull_refresh -S

使用

``javascript
import {View, Text, FlatList} from 'react-native';
import LottieView from 'lottie-react-native';
import {RefreshHeader, beginRefreshing, endRefreshing} from '@shenorg/ss_rn_native_pull_refresh';

const fruitsAnimation = require('./res/bouncing-fruits.json');

function App() {
const [progress, setProgress] = useState(0);
const [headerWidth, setHeaderWidth] = useState(0);
const lottieViewRef = React.createRef();

const datas = Array.apply(null, {length: 10}).map((e, i) => {
return box_${i};
});

const renderItem = (data) => {
const {item, index} = data;
return (

{item}

);
};

return (

contentContainerStyle={[styles.scrollView]}
onLayout={(event) => {
const {layout} = event.nativeEvent;
setHeaderWidth(layout.width);
}}
refreshControl={
onPull={(percent, offset) => {
setProgress(percent);
}}
onStateChange={(state) => {
if (state === 3) {
lottieViewRef.current.play();
setTimeout(() => {
endRefreshing();
}, 1500);
}
}}
headerComponent={
style={{
width: headerWidth,
justifyContent: 'center',
alignItems: 'center',
}}>
ref={lottieViewRef}
source={fruitsAnimation}
progress={progress}
style={{
height: 80,
}}
/>

}
/>
}
keyExtractor={(item, index) => index + ''}
data={datas}
renderItem={renderItem}
/>

);
}

const styles = StyleSheet.create({
page: {
flex: 1,
},
scrollView: {
width: '100%',
alignItems: 'center',
backgroundColor: '#ffffff',
},
box: {
justifyContent: 'center',
alignItems: 'center',
width: 200,
height: 200,
marginBottom: 50,
borderWidth: 1,
borderColor: 'teal',
backgroundColor: '#cccccc',
},
});

``