React Native TouchableOpacity onPress 不适用于 FlatList答案

【问题标题】：React Native TouchableOpacity onPress not working with FlatListReact Native TouchableOpacity onPress 不适用于 FlatList
【发布时间】：2021-10-26 15:40:54
【问题描述】：

我创建了一个像这样的可选国家/地区的平面列表

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

我这样定义了一个 Country 组件

import React from "react";
import { View, Text, TouchableOpacity } from "react-native";
import { styles } from "./Style";

export default function Country({ children, text, onPress, selected }) {
  return (
    <View style={styles.container}>
      <View style={[styles.view, selected && styles.selected]}>
        <TouchableOpacity onPress={onPress}>{children}</TouchableOpacity>
      </View>
      <TouchableOpacity onPress={onPress}>
        <Text style={styles.text}>{text}</Text>
      </TouchableOpacity>
    </View>
  );
}

一切正常，我可以选择一个国家，但不知何故，现在 touchableOpacity onPress 事件似乎已损坏，并且元素不再可按下。为了使事情正常工作，我需要对数据数组或 Country 组件进行编辑和撤消编辑。这是导致事情失败的 RN 错误吗？

【问题讨论】：

标签： react-native react-native-flatlist touchableopacity flatlist

【解决方案1】：

我找到了根本问题。原来问题出在 Country 组件包装器的样式表上。我给了它一个 alignSelf: "baseline" 不知道为什么，但删除它解决了麻烦

【讨论】：