React Native: Как отобразить: «нет» конкретную кнопку в списке

#react-native

Вопрос:

Я создаю плоский список, в котором внутри каждой информации есть кнопка удаления. Я хочу показать имя данных за пределами плоского списка и display: 'none' нажать кнопку только для этой строки списка, чтобы отключить кнопку удаления. Как я могу это сделать?

Мой код рендеринга:

 //----------------Render flatlist------------------
function renderItem({ item }) {

    return (
        <View style={styles.renderBox}>
            <Text numberOfLines={1} style={{ width: 230, fontSize: 17, fontWeight: 'bold' }} > {'=> '} {item.certificateName}</Text>
            <View style={{ flexDirection: 'row' }}>
                <TouchableOpacity onPress={() => changeCertification(item.id)} >
                    <Icon name='check-circle' size={40} />
                </TouchableOpacity>
                <Text>  </Text>
                <TouchableOpacity onPress={() => DeleteCertificate(item.id)} >
                    <Icon name='times-circle' size={40} />
                </TouchableOpacity>
            </View>
        </View>
    )
}
 

отображение моего плоского списка: изображение

Ответ №1:

Предположим, что у предмета может быть реквизит под названием isHidden (или что-то в этом роде). В renderItem поле добавить условие для проверки isHidden не соответствует действительности:

 function renderItem({ item }) {
    if(item.isHidden)
    // return empty view
    return <View />
    return (
        <View style={styles.renderBox}>
            <Text numberOfLines={1} style={{ width: 230, fontSize: 17, fontWeight: 'bold' }} > {'=> '} {item.certificateName}</Text>
            <View style={{ flexDirection: 'row' }}>
                <TouchableOpacity onPress={() => changeCertification(item.id)} >
                    <Icon name='check-circle' size={40} />
                </TouchableOpacity>
                <Text>  </Text>
                <TouchableOpacity onPress={() => DeleteCertificate(item.id)} >
                    <Icon name='times-circle' size={40} />
                </TouchableOpacity>
            </View>
        </View>
    )
}
 

в DeleteCertificate вы обновите свой список до элемента, который был скрыт

 function DeleteCerticate(id){
   //...
  //im assuming your list is name DATA
  const ixToHide = DATA.findIndex(item=>item.id == id)
  if(ixToHide >= 0)
    DATA[ixToHide].isHidden = true
}