react-native实现评价星星
程序员文章站
2022-06-24 10:06:58
react-native 实现评价星星...
react-native 如何做小星星(评价星星)✨
先贴图看看是不是老哥想要的东西
直接贴代码
class YouCompName extends Component{
constructor(){
super();
//ResImg.crm.starno 这个是小编项目工程的一个require图片地址 (代表未选中的星星图片)
this.xin=[ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno];
this.state={};
}
render(){
return <View style={{flex:1}}>
{(this.state.xin||this.xin).map((data,ind)=><TouchableOpacity
style={{paddingRight:gw(5)}}
onPress={()=>{
let arr=[];
//ResImg.crm.staryes 这个是选中的星星require图片
for(let i=0;i<(ind+1);i++)
arr.push(ResImg.crm.staryes);
let dat=[ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno,ResImg.crm.starno];
let xin=dat.splice((ind+1),5);
this.setState({
xin:[...arr,...xin],
level:arr.length,
})
}}
>
<Image source={data} style={{width:gw(50),height:gw(50)}} />
</TouchableOpacity>)}
</View>;
}
}
非常简单的一个实现,小编上面直接写了一个简单的 rn 实体类,不保证粘贴直接能运行,只为给大家分享查阅的时候更直观一些。
以上标记部分是你想要的星星等级, (*4 纯属小编项目所需) arr.length 是1-5的数字. 到此就记录完了星星实现的过程,非常简单,求支持 ????????????~~
本文地址:https://blog.csdn.net/qq_37399372/article/details/109388326
上一篇: linux几个没用但是有趣的命令(收藏)
下一篇: Charles移动端抓包