我有一个用户个人资料页面,每个用户的评分从 0 到 5。 我想根据用户的排名来填充星星。 例如如果用户的评分是 4 我需要 4 颗星来填充,1 颗星留空
这是我在渲染方法中的代码:
<Text>{item.rate}</Text> // here I get the rate from api 0 to 5
<View>
<Icon name="star" color="#9fa1a7" type="solid" size={16}/>
<Icon name="star" color="#9fa1a7" type="solid" size={16}/>
<Icon name="star" color="#9fa1a7" type="solid" size={16}/>
<Icon name="star" color="#9fa1a7" type="solid" size={16}/>
<Icon name="star" color="#ffffff" type="solid" size={16}/>
</View>
最佳答案
由于您的星星数量没有变化,只有它们的颜色发生变化,因此使用 color={item.rate >= X ? 'color on' : 'color off'}
在每个图标上:
<Text>{item.rate}</Text>
<View>
<Icon name="star" color={item.rate >= 1 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
<Icon name="star" color={item.rate >= 2 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
<Icon name="star" color={item.rate >= 3 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
<Icon name="star" color={item.rate >= 4 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
<Icon name="star" color={item.rate >= 5 ? '#9fa1a7' : '#ffffff'} type="solid" size={16}/>
</View>
或者从数组中生成星星以减少重复:
<Text>{item.rate}</Text>
<View>{
[1, 2, 3, 4, 5].map(score =>
<Icon
name="star"
color={item.rate >= score ? '#9fa1a7' : '#ffffff'}
type="solid"
size={16}
/>
)
}</View>
关于javascript - 如何在 react-native 中渲染带有 if 条件的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55607490/