React Native flatlist условного рендеринга

Question

У меня есть следующий плоский список в реагировать нативно со следующими элементами.

тип имени ключа

Теперь у меня также есть следующая функция renderItem, которая используется для визуализации элементов плоского списка,

 renderItem={({ item }) => (
     <View>
     <View style={styles.navBarLeftButton}>
     <Avatar
     medium
     rounded
     source={{uri:item.name}}
     activeOpacity={0.7}
    onPress={() => console.log(this.state.data)}
    />
  <Text style={styles.textbutton}>{item.type}</Text>
  <Text>{item.description}</Text>
  <Text>{item.request} <Emoji name={item.request} style={{fontSize: 15}} /> 
 <Emoji name="pray" style={{fontSize: 15}} /></Text>
 </View>
 </View>
  )}

Я хочу визуализировать другую функцию рендеринга на ключе элемента плоского списка. Можно ли сделать условный рендеринг с помощью реагирующей нативной базы плоского списка на ключе?

Answer 1

Я думаю, это поможет вам

renderItem={({ item, index })=>
    <View>
        {index == 0 ? <Text>Some Text</Text> : <Text>Some Text</Text> }
    </View>
}}

Answer 2

Похоже, что элементы FlatList не принимают условный рендеринг, поэтому я решил решить аналогичную проблему, сначала очистив результат, а затем передав их в функцию renderItem.

Answer 3

Вы хотите вернуть два разных набора шаблонов?Что-то вроде:

renderItem={({item, index}) => {
    if (index == 0) {
        return <View style={{flex: 1, flexDirection: 'row'}}>
                <Image source={item.image} style={styles.flatList_imageView} resizeMode="contain"/>
                </View>
    }

    return <View style={{flex: 1, flexDirection: 'row'}}>
            <Text>{item.key}</Text>
            </View>
}

Answer 4

Опора renderItem для Flatlist может принимать 2 аргумента, второй из которых является индексом, так что вы можете сделать что-то вроде

renderItem={({ item, index })=>{
    if(index = 0){
        //do something
    }
}}

Затем просто добавьте переключатель или некоторые операторы if, и вы можете сделать условно.