React Native二次打开页面时<TouchableWithoutFeedback />失效问题求解

失效原因 #

• 第二次打开页面时，Map组件重新挂载，外层TouchableWithoutFeedback的触摸事件优先级低于原生MapView组件，手势被MapView拦截，无法触发onPress回调。
• 你使用React.createRef()声明mapView引用，函数组件每次重渲染都会生成新的ref实例，会导致组件渲染逻辑异常，进一步影响外层可触摸组件的事件绑定。
• 部分React Native版本中，直接将Keyboard.dismiss作为TouchableWithoutFeedback的onPress回调，组件复用时会出现上下文丢失，无法关联当前活跃的输入框实例。

无需TouchableWithoutFeedback的替代方案 #

方案1：使用View手势响应系统（推荐，仅修改当前页面） #

直接在页面最外层View上绑定手势捕获逻辑，不会影响子组件的正常操作：

1. 删除外层<TouchableWithoutFeedback>标签
2. 给原有子级<View style={{flex: 1}}>添加属性：

<View 
  style={{flex: 1}}
  onStartShouldSetResponder={() => {
    Keyboard.dismiss();
    return false; // 不拦截后续手势，不影响MapView、按钮等子组件操作
  }}
>

方案2：全局配置（通用所有页面） #

在项目入口文件（如App.js）中统一包裹根组件，所有页面自动支持点击空白收起键盘，不需要修改当前Map组件代码：

import { NavigationContainer } from '@react-navigation/native';
import { TouchableWithoutFeedback, Keyboard } from 'react-native';

export default function App() {
  return (
    <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
      <NavigationContainer>
        {/* 原有根导航、路由配置 */}
      </NavigationContainer>
    </TouchableWithoutFeedback>
  );
}

额外优化建议 #

将原代码中的const mapView = React.createRef();修改为const mapView = useRef(null);，函数组件中useRef创建的引用会在组件生命周期内保持稳定，不会因为重渲染重置，避免出现调用setCamera、animateCamera时报undefined的问题。

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