Как визуализировать элементы, если условия в Reaction-native?

Question

У меня есть страница профиля для пользователей, каждый пользователь имеет оценку от 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>

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

Примечание: это отвечает на вопрос "как сделать условный рендеринг компонента" (т. Е. Заголовок вопроса), но подход, который меняет цвет звезды, лучше решит проблему с 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>

Answer 3

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>

}