Блог

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

 export default function Body() {  const data = useData();  const [selected, setSelected] = useState(1);  const renderItem = ({ item }) =gt; {  return item.empty ? (  lt;View style={styles.blank} /gt;  ) : (  lt;Country  text={item.name}  onPress={() =gt; setSelected(item.id)}  selected={item.id === selected}  gt;  lt;item.Flag /gt;  lt;/Countrygt;  ); }; return ( lt;View style={styles.container}gt;  lt;FlatList  data={data}  renderItem={renderItem}  keyExtractor={(item) =gt; item.id.toString()}  extraData={selected}  showsVerticalScrollIndicator={false}  contentContainerStyle={styles.flatlist}  numColumns={3}  /gt; lt;/Viewgt; ); }  

И я определил компонент страны следующим образом

 import React from "react"; import { View, Text, TouchableOpacity } from "react-native"; import { styles } from "./Style";  export default function Country({ children, text, onPress, selected }) {  return (  lt;View style={styles.container}gt;  lt;View style={[styles.view, selected amp;amp; styles.selected]}gt;  lt;TouchableOpacity onPress={onPress}gt;{children}lt;/TouchableOpacitygt;  lt;/Viewgt;  lt;TouchableOpacity onPress={onPress}gt;  lt;Text style={styles.text}gt;{text}lt;/Textgt;  lt;/TouchableOpacitygt;  lt;/Viewgt;  ); }  

Все работало отлично, и я смог выбрать страну, но почему-то теперь осязаемая способность при нажатии на событие кажется нарушенной, и элементы больше не нажимаются. чтобы все работало, мне нужно отредактировать и отменить редактирование массива данных или компонента страны. Является ли это ошибкой RN, приводящей к сбою?

Я нашел корень проблемы. Оказывается, проблема кроется в таблице стилей оболочки компонента Country. Я дал ему alignSelf: "baseline" не знаю почему, но удаление решило проблему