@td-design/react-native-rating/lib/module/useSwipeRating.js

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

import { useEffect } from 'react';
import { runOnJS, useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
export default function useSwipeRating(_ref) {
  let {
    onFinishRating,
    size = 40,
    count = 5,
    rating = count / 2,
    fractions = 2,
    ratingFillColor
  } = _ref;
  const translateX = useSharedValue(0);
  const getCurrentRating = translateX => {
    'worklet';

    return !fractions ? Math.ceil(translateX / size) : +(translateX / size).toFixed(fractions);
  };
  useEffect(() => {
    translateX.value = rating * size;
  }, [rating, size]);
  const handler = useAnimatedGestureHandler({
    onStart(_, ctx) {
      ctx.offsetX = translateX.value;
    },
    onActive(event, ctx) {
      const value = event.translationX + ctx.offsetX;
      translateX.value = value >= count * size ? count * size : value;
    },
    onEnd() {
      const currentRating = getCurrentRating(translateX.value);
      onFinishRating && runOnJS(onFinishRating)(currentRating);
    }
  });
  const primaryViewStyle = useAnimatedStyle(() => {
    return {
      backgroundColor: ratingFillColor,
      width: translateX.value,
      height: size - 1
    };
  });
  return {
    primaryViewStyle,
    handler
  };
}
//# sourceMappingURL=useSwipeRating.js.map