React Native中FlatList内TextInput键盘闪退问题求助

以下是几个经过验证的解决方案，按优先级尝试：

1. 关闭FlatList的removeClippedSubviews属性 #

默认情况下removeClippedSubviews为true，React Native会卸载屏幕外的行组件以优化性能。当键盘弹出时，末尾行可能被误判为超出可视区域而被卸载，导致TextInput瞬间失去焦点，键盘随之关闭。关闭该属性可避免此问题：

<FlatList
  data={yourData}
  renderItem={({item}) => <YourInputRow item={item} />}
  keyExtractor={(item) => item.id}
  removeClippedSubviews={false}
/>

2. 配置keyboardShouldPersistTaps属性 #

设置该属性为'handled'，确保点击TextInput时，键盘不会因为FlatList的点击事件拦截而失去焦点：

<FlatList
  data={yourData}
  renderItem={({item}) => <YourInputRow item={item} />}
  keyExtractor={(item) => item.id}
  keyboardShouldPersistTaps="handled"
/>

如果'handled'无效，可尝试设置为'always'（不过可能会影响列表其他点击事件的响应）。

3. 正确使用KeyboardAvoidingView #

之前使用无效可能是未适配平台或未启用该组件。根据平台设置对应的behavior，并确保组件包裹整个FlatList：

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

<KeyboardAvoidingView
  style={{ flex: 1 }}
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  enabled={true}
>
  <FlatList
    data={yourData}
    renderItem={({item}) => <YourInputRow item={item} />}
    keyExtractor={(item) => item.id}
  />
</KeyboardAvoidingView>

4. 手动滚动到目标行（可选补充） #

如果上述方案仍有问题，可在TextInput获取焦点时，让FlatList滚动到该行位置，确保输入框始终在键盘上方：

// 行组件
const YourInputRow = ({ item, index, scrollToIndex }) => {
  return (
    <TextInput
      value={item.text}
      onChangeText={(text) => {/* 此处添加数据更新逻辑 */}}
      onFocus={() => {
        scrollToIndex({ index, animated: true });
      }}
    />
  );
};

// 父组件中的FlatList
const flatListRef = useRef(null);

<FlatList
  ref={flatListRef}
  data={yourData}
  renderItem={({ item, index }) => (
    <YourInputRow
      item={item}
      index={index}
      scrollToIndex={(params) => flatListRef.current?.scrollToIndex(params)}
    />
  )}
  keyExtractor={(item) => item.id}
/>

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