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