ReactNative星级组件

ReactNative星级组件开发，本文适用于初中级RN开发者，码字不易。

下面我们开始正文:

直接上代码，组件如下。

const StarRate: React.FC<StarRateProps> = ({ rating, style, disabled, onPress }) => {
    const [star, setStar] = useState<any[]>(['star_0', 'star_0', 'star_0', 'star_0', 'star_0']);

    useEffect(() => {
        if (rating) {
            getStar(rating + 1);
        }
    }, [rating]);

    console.log('rating', rating);

// 渲染star
    const getStar = (num: number) => {
        const newStar = star.map(item => {
            --num;
            return num >= 1 ? 'star_2' : num > 0 ? 'star_1' : 'star_0';
        });
        setStar([...newStar]);
    };

// 支持评级
    const curStarIndex = (idx: number) => {
        getStar(idx + 2);
        onPress && onPress(idx);
    };

    return (
        <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
            {star.map((item, idx) => (
                <TouchableOpacity
                    activeOpacity={1}
                    disabled={(!disabled && true) || !disabled}
                    onPress={() => curStarIndex(idx)}>
                    <Icon style={{ marginRight: px2dp(4) }} key={`${idx}-${item}`} type={item} width={20} height={20} />
                </TouchableOpacity>
            ))}
        </View>
    );
};

使用

 <StarRate
    disabled
    rating={2}
  }></StarRate>