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

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

import React, { forwardRef, useMemo } from 'react';
import { StyleSheet } from 'react-native';
import { PanGestureHandler } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
import { Flex, useTheme } from '@td-design/react-native';
import SwipeStar from './components/SwipeStar';
import useSwipeRating from './useSwipeRating';
const SwipeRating = /*#__PURE__*/forwardRef(
// eslint-disable-next-line @typescript-eslint/no-unused-vars
(props, _ref) => {
  const theme = useTheme();
  const {
    onFinishRating,
    size = 40,
    count = 5,
    rating = count / 2,
    fractions = 2,
    strokeColor = theme.colors.func200,
    ratingBgColor = theme.colors.white,
    ratingFillColor = theme.colors.func200
  } = props;
  if (size > 80) {
    throw new Error('评分组件最大size不能超过80');
  }
  const {
    primaryViewStyle,
    handler
  } = useSwipeRating({
    fractions,
    size,
    rating,
    count,
    onFinishRating,
    ratingFillColor
  });
  const Ratings = useMemo(() => Array(count).fill('').map((_, index) => /*#__PURE__*/React.createElement(SwipeStar, {
    key: index,
    width: size,
    height: size,
    bgColor: ratingBgColor,
    strokeColor: strokeColor
  })), [count, ratingBgColor, size, strokeColor]);
  const styles = StyleSheet.create({
    content: {
      flexDirection: 'row',
      alignItems: 'center',
      width: count * size
    }
  });
  return /*#__PURE__*/React.createElement(PanGestureHandler, {
    onGestureEvent: handler
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: styles.content
  }, /*#__PURE__*/React.createElement(Flex, {
    style: StyleSheet.absoluteFill
  }, /*#__PURE__*/React.createElement(Animated.View, {
    style: primaryViewStyle
  })), /*#__PURE__*/React.createElement(Flex, {
    justifyContent: "center",
    alignItems: "center"
  }, Ratings)));
});
export default SwipeRating;
//# sourceMappingURL=SwipeRating.js.map