ss_rn_native_pull_refresh

安装

npm install @shenorg/ss_rn_native_pull_refresh -S 或 yarn add @shenorg/ss_rn_native_pull_refresh -S

使用

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 (
      <View key={item} style={[styles.box]}>
        <Text>{item}</Text>
      </View>
    );
  };

  return (
    <View style={[styles.page]}>
      <FlatList
        contentContainerStyle={[styles.scrollView]}
        onLayout={(event) => {
          const {layout} = event.nativeEvent;
          setHeaderWidth(layout.width);
        }}
        refreshControl={
          <RefreshHeader
            onPull={(percent, offset) => {
              setProgress(percent);
            }}
            onStateChange={(state) => {
              if (state === 3) {
                lottieViewRef.current.play();
                setTimeout(() => {
                  endRefreshing();
                }, 1500);
              }
            }}
            headerComponent={
              <View
                style={{
                  width: headerWidth,
                  justifyContent: 'center',
                  alignItems: 'center',
                }}>
                <LottieView
                  ref={lottieViewRef}
                  source={fruitsAnimation}
                  progress={progress}
                  style={{
                    height: 80,
                  }}
                />
              </View>
            }
          />
        }
        keyExtractor={(item, index) => index + ''}
        data={datas}
        renderItem={renderItem}
      />
    </View>
  );
}

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',
  },
});