react-native实现评价星星

最新推荐文章于 2021-03-10 01:44:55 发布

99小盆友

最新推荐文章于 2021-03-10 01:44:55 发布

阅读量2.4k

点赞数 2

分类专栏： react-native 评价星星小星星文章标签： react native 移动开发 javascript

本文链接：https://blog.csdn.net/qq_37399372/article/details/109388326

版权

react-native 同时被 3 个专栏收录

6 篇文章 0 订阅

订阅专栏

评价星星

1 篇文章 0 订阅

订阅专栏

小星星

1 篇文章 0 订阅

订阅专栏

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>;
	}

}