react-native实现评价星星

   日期:2020-11-01     浏览:152    评论:0    
核心提示: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的数字. 到此就记录完了星星实现的过程,非常简单,求支持 ~~

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服