リスト項目

Question

に私はリストの条件を持っている場合、私はもし条件文を置くことができますどのように配列をレンダリングすること？.. を例

のために（item.ticketId === 2）{ とであればif文はデータのレンダリングが異なる色になります }

私は別の関数を作成する必要がありますか？

  <Content> 
       <ScrollView> 
       <List> 
        { this.state.ticket.map((item, i) => (
        <ListItem 
        roundAvatar 
        key={i} 
        avatar={ 
         <View > 
         <Text>{item.ticketId}</Text> 
         </View> 
        } 
         title={ 
         <View> 
          <Text>ROW :{item.row}</Text> 
         </View> 
         } 
         subtitle={ 
         <View> 
          <Text>GATE :{item.gate}</Text> 
         </View> 
         } 
        /> 
       )) 
        } 
        </List> 
       </ScrollView> 
       </Content> 

Answer 1

条件演算子を使用できます。このようなもの

<View > 
    <Text style={item.ticketID === 2 ? style1 : style2}>{item.ticketId}</Text> 
</View> 

Answer 2

マッピング機能を別の機能に移動して読みやすくすることをお勧めします。あなたがでコンディショニングを行うにはより多くの方法に興味があれば

render() { 
    return (
     <Content> 
      <ScrollView> 
       <List> 
        { this.state.ticket.map(this.renderListItem) } 
       </List> 
      </ScrollView> 
     </Content> 
    ); 
} 

：

renderListItem = (item, i) => { 
    // you can use standard if/else 
    if (item.ticketId === 2) { 
     // render something you want 
     return (
      <ListItem 
       roundAvatar 
       key={i} 
       avatar={ 
        <View style={customStyleObject}> 
         <Text>{item.ticketId}</Text> 
        </View> 
       } 
       title={ 
        <View style={customStyleObject}> 
         <Text>ROW :{item.row}</Text> 
        </View> 
       } 
       subtitle={ 
        <View style={customStyleObject}> 
         <Text>GATE :{item.gate}</Text> 
        </View> 
       } 
      /> 
     ); 
    } else { 
     // or you can use ternary expressions for some smaller differences 
     return (
      <ListItem 
       roundAvatar 
       key={i} 
       avatar={ 
        <View style={item.ticketId===3 ? customStyle : standardStyle}> 
         <Text>{item.ticketId}</Text> 
        </View> 
       } 
       title={ 
        <View> 
         <Text>ROW :{item.row}</Text> 
        </View> 
       } 
       subtitle={ 
        <View> 
         <Text>GATE :{item.gate}</Text> 
        </View> 
       } 
      /> 
     ); 
    } 
} 

その後方法をレンダリングでそれを呼び出す：/ ELSE構文または三元表現があればそれで、あなたは標準を使用しますか、どちらも反応し、ネイティブに反応し、あなたはそれらを学ぶことができますhere