1. 项目概述：React Native 鸿蒙星级评分组件开发实战
在鸿蒙应用开发中，评分组件是用户交互的重要元素。传统方案要么依赖第三方库带来兼容性问题，要么实现粗糙导致交互体验差。本文将分享如何基于React Native原生能力，开发一个零依赖、高性能的星级评分组件，完美适配鸿蒙平台。
这个组件支持全星/半星选择、禁用状态、自定义样式等核心功能，并针对鸿蒙平台进行了深度优化。代码量控制在200行以内，却实现了企业级应用所需的全部评分功能。特别在滑动体验和性能优化方面，我们通过重构解决了初版中的卡顿问题，使评分交互如原生般流畅。
2. 核心设计思路与技术选型
2.1 技术架构设计
我们采用纯React Native方案，避免引入任何第三方依赖。核心思路是：
- 使用原生Text组件渲染星标符号"★"，无需额外图标库
- 通过PanResponder处理触摸交互，实现精准的坐标计算
- 动态样式绑定实现视觉反馈
- 完善的边界条件处理
这种架构的优势在于：
- 零依赖，避免版本冲突
- 性能接近原生组件
- 代码可维护性强
- 完全遵循鸿蒙设计规范
2.2 鸿蒙平台适配要点
鸿蒙平台对UI组件有严格的规范要求，我们在设计中特别注意了以下几点：
-
视觉规范：
- 星标尺寸：默认24px（可根据场景调整）
- 间距：8px
- 选中色使用鸿蒙主题蓝(#007DFF)
- 禁用状态透明度设为0.6
-
交互规范：
- 支持滑动评分
- 半星选择需精确到50%宽度
- 禁用状态下无视觉反馈
-
性能优化：
- 避免重复渲染
- 使用useCallback缓存函数
- 手势处理做防抖优化
3. 核心实现详解
3.1 基础组件结构
首先定义评分组件的props接口和常量配置：
typescript复制interface RatingProps {
totalStars?: number; // 总星数
value?: number; // 当前评分
allowHalf?: boolean; // 是否允许半星
disabled?: boolean; // 是否禁用
activeColor?: string; // 选中颜色
inactiveColor?: string; // 未选中颜色
size?: number; // 星星尺寸
spacing?: number; // 星星间距
onChange?: (value: number) => void; // 评分变化回调
}
const RATING_CONSTANT = {
totalStars: 5, // 默认总星数
starSize: 24, // 默认尺寸
starSpacing: 8, // 默认间距
activeColor: '#007DFF', // 默认选中色
inactiveColor: '#E5E5E5',// 默认未选中色
disabledOpacity: 0.6 // 禁用状态透明度
};
3.2 评分计算逻辑
核心的评分计算通过以下函数实现：
typescript复制const calculateScore = (x: number) => {
if (x <= 0) return 0;
if (x >= containerWidth) return totalStars;
// 计算点击位置对应的星级
let score = x / (singleStarWidth.current + spacing);
// 半星模式处理
if (allowHalf) {
score = Math.round(score * 2) / 2;
} else {
score = Math.round(score);
}
return Math.max(0, Math.min(totalStars, score));
};
这个函数处理了三种边界情况：
- 点击最左侧返回0分
- 点击最右侧返回满分
- 中间位置根据allowHalf参数返回整数或半星分数
3.3 手势交互实现
使用PanResponder处理触摸交互：
typescript复制const panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => !disabled,
onMoveShouldSetPanResponder: () => !disabled,
onPanResponderMove: (_, gestureState) => {
const newScore = calculateScore(gestureState.moveX);
setCurrentScore(newScore);
},
onPanResponderRelease: (_, gestureState) => {
const finalScore = calculateScore(gestureState.moveX);
setCurrentScore(finalScore);
onChange?.(finalScore);
},
onPanResponderTerminate: () => {
setCurrentScore(value);
}
});
这种实现方式支持：
- 滑动评分
- 点击评分
- 手势中断恢复
- 禁用状态处理
3.4 星标渲染逻辑
根据当前评分值渲染不同状态的星标：
typescript复制const getStarStatus = (index: number) => {
const starIdx = index + 1;
if (currentScore >= starIdx) return 'full';
if (allowHalf && currentScore > starIdx - 1) return 'half';
return 'empty';
};
// 渲染单个星标
const renderStar = (index: number) => {
const status = getStarStatus(index);
const starStyle = {
fontSize: size,
color: status === 'full' ? activeColor : inactiveColor,
};
if (status === 'half') {
return (
<View key={index} style={{ width: size / 2, overflow: 'hidden' }}>
<Text style={[starStyle, { color: activeColor }]}>★</Text>
</View>
);
}
return <Text key={index} style={starStyle}>★</Text>;
};
半星效果通过overflow:hidden截断实现，这种方式在鸿蒙平台上渲染性能最好。
4. 性能优化与问题解决
4.1 滑动卡顿问题解决
初版实现中发现的滑动卡顿问题，主要通过以下优化解决：
-
减少重复计算：
typescript复制const singleStarWidth = useRef(0); const initSize = useCallback(() => { if (ratingRef.current && !containerWidth) { ratingRef.current.measure((_, __, width) => { setContainerWidth(width); singleStarWidth.current = (width - (totalStars - 1) * spacing) / totalStars; }); } }, [totalStars, spacing, containerWidth]); -
使用useCallback缓存函数：
typescript复制const calculateScore = useCallback((x: number) => { // 计算逻辑 }, [totalStars, allowHalf, containerWidth]); -
优化渲染性能：
- 避免不必要的状态更新
- 使用React.memo优化子组件
4.2 鸿蒙平台特定问题
在鸿蒙平台上我们遇到了几个特有问题：
-
星标渲染模糊：
- 解决方案：使用Text组件而非自定义View
- 设置合适的fontSize和lineHeight
-
手势响应延迟：
- 解决方案：调整PanResponder配置
- 添加50ms的防抖延迟
-
深色模式适配：
- 解决方案：监听系统主题变化
- 动态调整颜色值
5. 扩展功能实现
5.1 主题与全局配置
将评分配置与主题系统集成：
typescript复制const Rating = ({ theme = 'light', ...props }) => {
const colors = theme === 'dark' ? {
activeColor: '#007DFF',
inactiveColor: '#333333'
} : {
activeColor: '#007DFF',
inactiveColor: '#E5E5E5'
};
return <BaseRating {...props} {...colors} />;
};
5.2 评分文字联动
实现评分与描述文字联动：
typescript复制const getRatingText = (score: number) => {
if (score === 0) return '极差';
if (score <= 2) return '不满意';
if (score <= 3.5) return '一般';
if (score <= 4.5) return '满意';
return '非常满意';
};
// 在组件中使用
<Text style={{ color: activeColor }}>
{getRatingText(currentScore)}
</Text>
5.3 自定义星标样式
支持自定义星标样式：
typescript复制const renderCustomStar = (index: number) => {
const status = getStarStatus(index);
return (
<Image
key={index}
source={status === 'full' ? activeStar : inactiveStar}
style={{ width: size, height: size }}
/>
);
};
5.4 评分持久化
使用AsyncStorage保存评分：
typescript复制const [score, setScore] = useState(0);
useEffect(() => {
const loadScore = async () => {
const savedScore = await AsyncStorage.getItem('rating');
if (savedScore) setScore(parseFloat(savedScore));
};
loadScore();
}, []);
const handleChange = async (value: number) => {
setScore(value);
await AsyncStorage.setItem('rating', value.toString());
};
6. 企业级应用建议
在实际项目中使用本组件时，建议：
-
样式封装：
- 将样式配置提取到主题系统中
- 支持全局修改
-
性能监控：
- 添加性能埋点
- 监控渲染时间
-
可访问性：
- 添加aria标签
- 支持键盘操作
-
测试覆盖：
- 单元测试覆盖核心逻辑
- E2E测试验证交互
-
文档规范：
- 完善Props文档
- 提供使用示例
这个组件已在多个鸿蒙应用中投入使用，表现稳定。它的优势在于：
- 完全遵循鸿蒙设计规范
- 无第三方依赖
- 高性能实现
- 灵活的扩展性
对于需要定制化评分的场景，可以基于此组件快速扩展，大大提升开发效率。