React Native Bottom Sheet 中 BottomSheetTextInput 键盘异常关闭问题解析

问题现象描述

在使用 React Native Bottom Sheet 库时，开发者可能会遇到一个奇怪的现象：当在 BottomSheetFlatList 的 footer 中使用 BottomSheetTextInput 组件，并且该输入框采用受控组件模式（即设置了 value 和 onChangeText 属性）时，每次输入内容都会导致键盘自动关闭，严重影响用户体验。

问题复现条件

这个问题在以下场景中会出现：

1. 在 BottomSheet 或 BottomSheetModal 中使用 BottomSheetFlatList 组件
2. 通过 ListFooterComponent 属性设置 footer 内容
3. footer 中包含 BottomSheetTextInput 组件
4. 输入框采用受控模式（即设置了 value 和 onChangeText 属性）

问题根源分析

经过深入排查，发现问题的根本原因与 React 的重新渲染机制有关。当开发者将 footer 渲染函数定义在组件内部时，每次状态更新都会导致该函数被重新创建，进而导致 footer 组件被重新渲染。这种频繁的重新渲染触发了键盘的异常关闭行为。

解决方案

解决这个问题的关键在于避免 footer 组件的非必要重新渲染。具体有以下两种解决方案：

方案一：直接传递 JSX 元素

<BottomSheetFlatList
  ListFooterComponent={
    <BottomSheetTextInput 
      style={styles.input} 
      value={value} 
      onChangeText={setValue}
    />
  }
  // 其他属性...
/>

方案二：使用 useCallback 优化渲染函数

const renderFooter = useCallback(
  () => (
    <BottomSheetTextInput 
      style={styles.input} 
      value={value} 
      onChangeText={setValue}
    />
  ),
  [value] // 依赖项数组
);

// 使用
<BottomSheetFlatList
  ListFooterComponent={renderFooter}
  // 其他属性...
/>

扩展知识：类似场景

这个问题不仅出现在 BottomSheetFlatList 的 footer 中，在其他类似场景下也可能发生，例如：

1. 在 BottomSheetModal 中使用 TabView 时
2. 在动态渲染的列表项中包含受控输入组件时
3. 在频繁更新的 UI 区域放置输入组件时

最佳实践建议

1. 对于简单的静态组件，直接传递 JSX 元素是最简单有效的解决方案
2. 对于需要动态渲染的复杂组件，使用 useCallback 进行性能优化
3. 避免在渲染函数中直接创建组件实例，这会导致不必要的重新渲染
4. 合理设置依赖项数组，确保组件只在必要时重新渲染

总结

React Native 开发中，组件的重新渲染机制经常会导致一些意想不到的行为。理解 React 的渲染机制和性能优化技巧，能够帮助开发者快速定位和解决这类问题。在 Bottom Sheet 这类复杂交互组件中使用输入控件时，特别需要注意组件的渲染优化，以确保良好的用户体验。