[英]How to render elements with if conditions in react-native?
我有一個用戶的個人資料頁面,每個用戶的費率從0到5.我想根據用戶的排名填寫星標。 例如,如果用戶的費率為4,我需要填4星,1星空白
這是我在render方法中的代碼:
<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'}
每個圖標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>
注意:這回答“如何有條件地渲染組件”(即問題的標題),但改變星形顏色的方法將更好地解決OP問題。
您可以有條件地渲染組件,如下所示:
<View>
{condition && <Component />}
</View>
在這里,你想渲染每個星星的速率,所以你正在尋找這樣的東西:
<View>
{item.rate > 0 && <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
{item.rate > 1 && <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
{item.rate > 2 && <Icon name="star" color="#9fa1a7" type="solid" size={16}/>}
{/* etc. */}
</View>
const itemarry=new Array().fill(item.rate);
render(){
<Text>{item.rate}</Text> // here I get the rate from api 0 to 5
<View>
{itemarry.map((item,index),()=>
<Icon name="star" color="#9fa1a7" type="solid" size={16} />
)}
</View>
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.