@td-design/react-native-tabs/lib/module/usePagerView.js

基于 @td-design/react-native 的 tabs 组件

import { useEffect, useMemo, useRef } from 'react';
import { Animated } from 'react-native';
import { useMemoizedFn, useSafeState } from '@td-design/rn-hooks';
export default function usePagerView(initialPage, page, onChange) {
  const pagerViewRef = useRef(null);
  const [activePage, setActivePage] = useSafeState(initialPage);
  const [isIdle, setIdle] = useSafeState(true);
  const setPage = useMemoizedFn(function (page) {
    let animated = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
    if (animated) {
      var _pagerViewRef$current;
      (_pagerViewRef$current = pagerViewRef.current) === null || _pagerViewRef$current === void 0 ? void 0 : _pagerViewRef$current.setPage(page);
    } else {
      var _pagerViewRef$current2;
      (_pagerViewRef$current2 = pagerViewRef.current) === null || _pagerViewRef$current2 === void 0 ? void 0 : _pagerViewRef$current2.setPageWithoutAnimation(page);
    }
    setActivePage(page);
    if (activePage !== page) {
      setIdle(false);
    } else {
      setIdle(true);
    }
    onChange === null || onChange === void 0 ? void 0 : onChange(page);
  });
  useEffect(() => {
    if (page !== undefined && page !== activePage) {
      setPage(page);
    }
  }, [page, activePage]);
  const offset = useRef(new Animated.Value(initialPage)).current;
  const position = useRef(new Animated.Value(0)).current;
  const onPageScroll = useMemo(() => Animated.event([{
    nativeEvent: {
      offset,
      position
    }
  }], {
    listener: _ref => {
      let {
        nativeEvent: {
          position,
          offset
        }
      } = _ref;
      if (__DEV__) {
        console.log('onPageScroll', 'position', position, 'offset', offset);
      }
    },
    useNativeDriver: true
  }), [offset, position]);
  const onPageSelected = useMemoizedFn(e => {
    setActivePage(e.nativeEvent.position);
    onChange === null || onChange === void 0 ? void 0 : onChange(e.nativeEvent.position);
    setIdle(true);
  });
  const [scrollState, setScrollState] = useSafeState('idle');
  const onPageScrollStateChanged = useMemoizedFn(e => {
    setScrollState(e.nativeEvent.pageScrollState);
    setIdle(e.nativeEvent.pageScrollState === 'idle');
  });
  return {
    pagerViewRef,
    currentPage: activePage,
    isIdle,
    scrollState,
    position,
    offset,
    setPage,
    onPageScroll,
    onPageSelected,
    onPageScrollStateChanged
  };
}
//# sourceMappingURL=usePagerView.js.map