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的数字. 到此就记录完了星星实现的过程,非常简单,求支持 🙏🙏🙏~~

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值