React Native：FlatList滚动到底部时最后一个TextInput自动失焦隐藏键盘

我正在构建一个类似Google Forms的通用表单，数据从服务器获取，使用FlatList渲染表单元素。但遇到一个问题：滚动到列表底部时，最后一个TextInput会自动失焦，键盘也随之隐藏。试过KeyboardAvoidingView和KeyboardAwareFlatList，问题仍然存在。

问题演示：

当前使用的TextInput代码：

<TextInput
  onBlur={() => console.log('I blur')}
  placeholder={title}
  onChangeText={text => setValue(text)}
  keyboardType="decimal-pad"
/>

以下是几个可行的解决方法：

1. 关闭FlatList的removeClippedSubviews优化 #

该属性默认开启用于性能优化，但滚动到底部时，可能误判最后一个输入框为不可见并临时卸载，从而触发失焦。修改FlatList配置：

<FlatList
  removeClippedSubviews={false}
  // 保留你的其他FlatList属性
/>

2. 优化KeyboardAwareFlatList的配置 #

如果使用react-native-keyboard-aware-scroll-view库的KeyboardAwareFlatList，调整额外滚动高度和平台适配参数：

import { KeyboardAwareFlatList } from 'react-native-keyboard-aware-scroll-view';

<KeyboardAwareFlatList
  extraScrollHeight={30} // 增加额外滚动高度，避免触发失焦逻辑
  enableOnAndroid={true}
  enableAutomaticScroll={true}
  // 保留你的其他FlatList属性
/>

3. 手动控制最后一个输入框的焦点 #

通过ref记录最后一个输入框，在滚动结束后，如果之前焦点在该输入框上，重新触发聚焦：

import { useRef, useState } from 'react';
import { FlatList, TextInput } from 'react-native';

// 假设你的表单数据数组为formData
const formData = [...];
const lastInputRef = useRef(null);
const [focusedIndex, setFocusedIndex] = useState(-1);

<FlatList
  data={formData}
  onScrollEndDrag={() => {
    // 若之前焦点在最后一个输入框，滚动结束后重新聚焦
    if (focusedIndex === formData.length - 1) {
      lastInputRef.current?.focus();
    }
  }}
  renderItem={({ item, index }) => (
    <TextInput
      ref={index === formData.length - 1 ? lastInputRef : null}
      onFocus={() => setFocusedIndex(index)}
      onBlur={() => console.log('I blur')}
      placeholder={item.title}
      onChangeText={text => setValue(text)}
      keyboardType="decimal-pad"
    />
  )}
/>

4. 调整KeyboardAvoidingView的行为 #

确保KeyboardAvoidingView的behavior属性适配当前平台，避免布局偏移导致的输入框失焦：

import { KeyboardAvoidingView, Platform } from 'react-native';

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{ flex: 1 }}
>
  <FlatList
    // 保留你的FlatList属性
  />
</KeyboardAvoidingView>

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