iOS/Expo Go环境下React Native TouchableWithoutFeedback onPress不触发

问题根因 #

iOS端React Native的可交互原生组件（比如TextInput）会优先消费触摸事件，默认不会将点击事件冒泡传递给父级的TouchableWithoutFeedback组件，所以你点击TextInput区域时父组件的onPress不会触发。

解决方案 #

根据实际使用需求选择对应方案即可：

方案1：实现点击页面任意区域收起键盘 #

如果你要实现的是键盘弹出后，点击页面任意非输入区域自动收起键盘，把整个页面的根容器替换成TouchableWithoutFeedback即可，不需要包裹在TextInput外层：

return (
  <TouchableWithoutFeedback onPress={() => {
    console.log('点击页面触发');
    Keyboard.dismiss();
  }}>
    <View style={{width: '100%', flex: 1}}>
      {/* 原有页面所有内容保持不变 */}
    </View>
  </TouchableWithoutFeedback>
)

注意要给根View添加flex:1属性保证占满整个页面空间，避免空白区域点击不生效。

方案2：保留TextInput外层Touchable的点击逻辑 #

如果你确实需要点击TextInput所在的红框区域触发自定义逻辑，同时保留TextInput的正常输入功能，可以将TouchableWithoutFeedback的onPress事件替换为onPressIn，onPressIn的响应优先级更高，不会被TextInput拦截：

<TouchableWithoutFeedback 
  onPressIn={() => {
    console.log('this message should appear on screen tap, but doesnt'); 
    Keyboard.dismiss();
  }}
>
  <View style={{flex: 1, borderWidth: 3, borderColor: 'red'}}>
    <TextInput 
      multiline 
      placeholder='Write a caption...' 
      style={{ flex: 1, padding:10, paddingTop: 12, paddingBottom: 12}}
      maxHeight={240}
    />
  </View>
</TouchableWithoutFeedback>

方案3：使用Pressable替代TouchableWithoutFeedback #

Pressable是React Native官方推荐的新版点击交互组件，事件冒泡处理逻辑更合理，跨端适配性更好，直接替换后也能解决点击不触发的问题：

<Pressable 
  onPress={() => {
    console.log('this message should appear on screen tap, but doesnt'); 
    Keyboard.dismiss();
  }}
  style={{flex: 1, borderWidth: 3, borderColor: 'red'}}
>
  <TextInput 
    multiline 
    placeholder='Write a caption...' 
    style={{ flex: 1, padding:10, paddingTop: 12, paddingBottom: 12}}
    maxHeight={240}
  />
</Pressable>

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