React Native中FlatList内TouchableOpacity onPress事件不生效问题咨询

这个问题不是React Native本身的bug，绝大多数情况是组件渲染稳定性不足导致的触摸响应异常。

核心问题点 #

• useData()返回的data数组引用不稳定：如果useData没有做缓存优化，每次组件重渲染都会返回全新的数组引用，即使数组内容没有变化，FlatList也会触发全量重绘，打断TouchableOpacity的事件响应链。
• renderItem函数未做缓存：定义在Body组件内部的renderItem每次重渲染都会生成新的函数引用，FlatList检测到renderItemprop变化会触发所有列表项重渲染，导致触摸事件失效。
• Country组件未做重渲染拦截：无意义的重复渲染会导致组件的触摸响应状态异常。

你提到的「编辑后撤销功能恢复」是因为React Native热重载仅更新修改的局部组件，不会触发顶层重渲染，临时稳定了data和渲染函数的引用，所以功能暂时恢复。

修复步骤 #

1. 缓存useData的返回值，保证依赖不变时数组引用稳定：

// 在useData内部对返回的data做缓存
const data = useMemo(() => {
  // 原有生成国家数组的逻辑
}, [/* 所有生成data用到的依赖参数 */])

2. 用useCallback缓存renderItem函数：

const renderItem = useCallback(({ item }) => {
  return item.empty ? (
    <View style={styles.blank} />
    ) : (
    <Country
      text={item.name}
      onPress={() => setSelected(item.id)}
      selected={item.id === selected}
    >
      <item.Flag />
    </Country>
  );
}, [selected])

3. 给Country组件包裹React.memo，拦截不必要的重渲染：

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

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>
  );
}
// 导出时包裹memo
export default memo(Country);

4. 额外检查样式文件：确认没有绝对定位的元素遮挡了TouchableOpacity的触摸区域，也没有异常的zIndex设置导致触摸层级错位。

内容的提问来源于stack exchange，提问作者Kcyr