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://www.uj5u.com/qita/199112.html
標籤：其他
上一篇：Vue開發問題（axios封裝）