React Native升级后List.Accordion内TextInput无法点击求助

1. 移除left属性中View的无效onPress并替换为可触摸组件 #

你在List.Accordion的left回调里给普通View添加了onPress，但View本身不原生支持触摸事件，在RN 0.7x版本中，这种写法可能会意外拦截内部TextInput的触摸事件。如果需要点击该区域触发折叠逻辑，建议用TouchableOpacity替代View，同时确保TextInput的事件能正常传递：

left={() => (
  <TouchableOpacity onPress={async () => await closeOthersAccordions()}>
    <Controller
      control={control}
      render={({ field: { onChange, onBlur, value } }) => (
        <TextInput
          // 保留原有属性
          onTouchStart={async (e) => {
            e.stopPropagation(); // 阻止事件冒泡到外层TouchableOpacity和Accordion
            if (!renderItem?.editable) setEnableAutomaticScroll(false);
            else setEnableAutomaticScroll(true);
            await closeOthersAccordions();
          }}
        />
      )}
      // 保留原有Controller属性
    />
    {/* 错误提示文本 */}
  </TouchableOpacity>
)}

2. 阻止TextInput的触摸事件冒泡到Accordion #

即使替换了组件，点击TextInput时事件仍可能冒泡到List.Accordion的onPress，导致焦点被抢占。在TextInput的onTouchStart、onFocus中添加事件停止传播逻辑：

<TextInput
  // 其他属性
  onTouchStart={async (e) => {
    e.stopPropagation(); // 关键：阻止事件向上传递
    if (!renderItem?.editable) setEnableAutomaticScroll(false);
    else setEnableAutomaticScroll(true);
    await closeOthersAccordions();
  }}
  onFocus={async (e) => {
    e.stopPropagation();
    setEnableAutomaticScroll(true);
    await closeOthersAccordions();
  }}
/>

3. 显式设置TextInput的pointerEvents #

如果上述方法无效，强制给TextInput设置pointerEvents='auto'，确保它能优先接收触摸事件：

<TextInput
  pointerEvents='auto'
  // 其他属性
/>

4. 检查样式覆盖问题 #

元素检查器显示只能选中TextInput上方的View，可能是样式中的z-index、position导致TextInput被上层组件遮挡。检查stylesList.listAccordion、stylesList.textInput的样式配置，确保TextInput的层级更高：

textInput: {
  // 其他样式
  zIndex: 10,
  position: 'relative',
}

5. 调整TextInput在Accordion中的位置 #

List.Accordion的onPress会响应整个头部区域的点击，新版本RN可能优先处理Accordion的点击事件。可以尝试将TextInput移出left属性，放在Accordion的title或自定义头部容器中，从根源避免事件冲突。

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