TextInput获焦（键盘弹出）时如何点击TouchableOpacity？

核心问题分析 #

当前代码存在两个关键问题：

• 点击建议列表时会触发TextInput的onBlur事件，直接将isTitleFocused设为false，导致列表提前消失，无法响应TouchableOpacity的点击
• 冗余嵌套ScrollView和FlatList，干扰触摸事件的正常传递

具体修复方案 #

1. 移除冗余的ScrollView嵌套 #

FlatList本身内置滚动功能，无需额外嵌套ScrollView，减少事件处理层级冲突。

2. 配置keyboardShouldPersistTaps确保事件传递 #

给FlatList添加keyboardShouldPersistTaps='handled'，让触摸事件能传递到子组件，同时保持键盘弹出状态。

3. 优化焦点失焦逻辑 #

通过临时状态标记点击行为，避免点击建议项时误触发列表隐藏。

修改后的完整代码：

import { useState } from 'react';
import { SafeAreaView, View, Text, TextInput, FlatList, TouchableOpacity } from 'react-native';

// 假设以下状态与函数已定义
// const [Input, setInput] = useState({ title: '', detail: '' });
// const [isTitleFocused, setIsTitleFocused] = useState(false);
// const [filteredTitle, setFilteredTitle] = useState([]);
// const [isSuggestionClicking, setIsSuggestionClicking] = useState(false);

// const handleTitleChange = () => { /* 你的业务逻辑 */ };
// const filterTitle = (val) => { /* 标题过滤逻辑 */ };
// const onTitleSelected = (title) => {
//   setInput(prev => ({ ...prev, title }));
//   setIsTitleFocused(false);
//   // 可选：选中后手动收起键盘
//   // Keyboard.dismiss();
// };

return (
  <SafeAreaView style={styles.container}>
    <View style={{ flex: 1 }}>
      <Text>Enter Title</Text>
      <TextInput
        style={{ width: '100%', height: 60, backgroundColor: 'green' }}
        autoCorrect={false}
        onChangeText={(val) => {
          handleTitleChange();
          filterTitle(val);
        }}
        multiline={false}
        onFocus={() => setIsTitleFocused(true)}
        onBlur={() => {
          // 延迟执行，确保点击建议项的事件优先触发
          setTimeout(() => {
            if (!isSuggestionClicking) setIsTitleFocused(false);
            setIsSuggestionClicking(false);
          }, 100);
        }}
        value={Input.title}
      />
      {isTitleFocused && (
        <FlatList
          data={filteredTitle}
          style={{ height: 200 }}
          keyboardShouldPersistTaps='handled'
          renderItem={({ item }) => (
            <TouchableOpacity
              style={{ padding: 10, backgroundColor: 'gray', marginVertical: 10 }}
              onPress={() => {
                setIsSuggestionClicking(true);
                onTitleSelected(item?.title);
              }}>
              <Text style={{ color: "white" }}>{item?.title || ''}</Text>
            </TouchableOpacity>
          )}
          keyExtractor={(item) => item?.title}
        />
      )}

      <Text>Enter Detail</Text>
      <TextInput
        style={{ width: '100%', height: 60, backgroundColor: 'lightgray' }}
        autoCorrect={false}
        onChangeText={handleDetailChange}
        multiline={false}
        value={Input.detail}
      />
    </View>
  </SafeAreaView>
);

关键说明 #

• keyboardShouldPersistTaps='handled'：当触摸事件被子组件（如TouchableOpacity）处理时，保持键盘弹出状态，不自动收起
• 延迟执行onBlur逻辑：确保点击建议项的事件先完成，再判断是否隐藏列表，避免列表提前消失导致点击无效
• 移除ScrollView嵌套：简化组件结构，提升滚动流畅度与事件传递效率

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