React Native交互其他元素时保持TextInput焦点的跨平台方案求助

核心改进思路 #

• 替换onBlur直接关闭列表的逻辑，改用延迟判断+焦点跟踪避免误触发
• 使用TouchableWithoutFeedback专门监听外部点击，替代原ScrollView上的全局点击事件
• 优化keyboardShouldPersistTaps配置，适配iOS和Web平台的焦点行为
• 给列表项添加事件冒泡阻止，确保Web端点击时输入框不会失焦

完整实现代码 #

import * as React from 'react';
import { 
  Keyboard, Text, View, SafeAreaView, ScrollView, TouchableWithoutFeedback, Pressable 
} from 'react-native';
import { ListItem, Input } from '@rneui/themed';

export default function App() {
  const [autoIsOpen, setAutoIsOpen] = React.useState(false);
  const inputRef = React.useRef(null);
  const blurTimeoutRef = React.useRef(null);

  // 输入框聚焦：打开列表，清除延迟关闭定时器
  const handleFocus = () => {
    setAutoIsOpen(true);
    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
  };

  // 输入框失焦：设置延迟，避免点击列表时误关闭
  const handleBlur = () => {
    blurTimeoutRef.current = setTimeout(() => {
      setAutoIsOpen(false);
    }, 150);
  };

  // 列表项点击：清除延迟定时器，执行选中操作
  const handleItemPress = (item) => {
    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
    inputRef.current?.setValue(item);
    console.log(`选中内容：${item}`);
    // 如需选中后关闭列表，可在此调用 setAutoIsOpen(false)
  };

  // 外部点击：关闭列表、收起键盘、清除定时器
  const handleOutsidePress = () => {
    if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current);
    setAutoIsOpen(false);
    inputRef.current?.blur();
    Keyboard.dismiss();
  };

  const AutocompleteList = () => {
    const list = ['abc', 'def', 'ghi', 'jkl', 'mno', 'pqr'];
    return list.map((item, index) => (
      <Pressable 
        key={index}
        onPress={(e) => {
          e.stopPropagation(); // Web端阻止事件冒泡，避免触发外部点击
          handleItemPress(item);
        }}
      >
        <ListItem bottomDivider>
          <ListItem.Content>
            <ListItem.Title>{item}</ListItem.Title>
          </ListItem.Content>
        </ListItem>
      </Pressable>
    ));
  };

  return (
    <SafeAreaView style={{ flex: 1 }}>
      {/* 外部点击监听：包裹全部内容，仅响应输入框/列表外的点击 */}
      <TouchableWithoutFeedback onPress={handleOutsidePress}>
        <View style={{ flex: 1 }}>
          <ScrollView 
            keyboardShouldPersistTaps="always"
            style={{ flex: 1 }}
          >
            <View style={{ padding: 10, alignItems: 'center' }}>
              <Input
                inputRef={inputRef}
                onFocus={handleFocus}
                onBlur={handleBlur}
                inputContainerStyle={{ width: '100%' }}
              />
            </View>
            {autoIsOpen && (
              <View style={{ padding: 10, alignItems: 'center' }}>
                <ScrollView
                  keyboardShouldPersistTaps="always"
                  style={{ width: '100%', height: 150 }}
                  onScroll={(e) => e.stopPropagation()} // iOS滚动时阻止触发外部点击
                >
                  <AutocompleteList />
                </ScrollView>
              </View>
            )}
          </ScrollView>
        </View>
      </TouchableWithoutFeedback>
    </SafeAreaView>
  );
}

关键改进说明 #

1. 延迟失焦处理：handleBlur中设置150ms延迟，点击列表时会提前清除定时器，避免Web端点击列表导致输入框失焦后立即关闭列表
2. 精准外部点击监听：用TouchableWithoutFeedback包裹整个内容，只响应输入框和列表之外的点击，解决iOS滚动时误触关闭的问题
3. Web端适配：列表项使用Pressable并阻止事件冒泡，确保点击列表时不会触发外部关闭逻辑；keyboardShouldPersistTaps="always"保证输入框保持焦点
4. iOS滚动适配：给自动完成列表的ScrollView添加onScroll事件阻止冒泡，避免滚动时误触发外部点击

实现效果 #

• iOS：滚动自动完成列表时不会误触关闭键盘或列表
• Web：点击列表项时输入框保持焦点，列表不会在点击前关闭
• 点击外部区域：输入框失焦、列表关闭、键盘自动收起

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