Question

我有一个针对用户的个人资料页面，每个用户的使用率从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>

Answer 1

由于您的星星数量不会改变，而只会改变颜色，因此请在每个图标上使用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>

Answer 2

注意：这回答了“如何有条件地渲染组件”（即问题的标题），但是更改星形颜色的方法将更好地解决OPs问题。

您可以有条件地渲染组件，如下所示：

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

Answer 3

string[] siruri = sir.Split(split);
cmd = new SqlCommand("Insert into Localitati(nume) values(@localitate)", con);

cmd.Parameters.AddWithValue("localitate", siruri[0].Trim());
cmd.ExecuteNonQuery();

cmd = new SqlCommand("Select id.localitate from Localitati where nume=@nume", con);

cmd.Parameters.AddWithValue("nume", siruri[0].Trim());

int idlocalitate = Convert.ToInt32(cmd.ExecuteScalar());

int nrzile;

}

如何在if-native中使用if条件渲染元素？

3 个答案: