React Native Bottom Sheet 中 TextInput 自动聚焦问题的分析与解决

问题现象

在使用 React Native Bottom Sheet 库时，开发者们普遍遇到了 BottomSheetTextInput 组件的自动聚焦问题。主要表现包括：

1. 当设置 autoFocus 属性时，底部表单会快速闪烁（打开后立即关闭）
2. 键盘弹出时底部表单高度异常，不遵守预设的 snapPoints
3. 在部分情况下，点击输入框会导致整个底部表单意外关闭

技术背景

React Native Bottom Sheet 是一个流行的底部表单组件库，它提供了高度可定制的底部面板功能。BottomSheetTextInput 是其专门为底部表单优化的文本输入组件，旨在解决原生 TextInput 在底部表单中的各种交互问题。

问题根源分析

经过对多个开发者反馈的分析，这些问题可能源于以下几个技术点：

1. 布局计算冲突：键盘弹出触发的布局重新计算与底部表单的高度动画产生竞争条件
2. 动画时序问题：自动聚焦、键盘弹出和表单展开动画的时序没有正确协调
3. React Native 0.73+ 兼容性：新版本 React Native 的布局引擎可能引入了行为变化

解决方案

临时解决方案

1. 延迟聚焦：使用 setTimeout 延迟执行 focus() 方法

useEffect(() => {
  const timer = setTimeout(() => {
    inputRef.current?.focus();
  }, 300);
  return () => clearTimeout(timer);
}, []);

2. 调整布局属性：为容器添加最小高度

container: {
  minHeight: 150,  // 根据实际情况调整
}

3. 避免 flexDirection: "row"：或者添加 flexWrap: "wrap" 属性

长期解决方案

1. 等待官方修复版本
2. 考虑使用替代输入组件
3. 在表单完全展开后再触发聚焦

最佳实践建议

1. 在非模态底部表单中使用 TextInput 时要特别小心
2. 测试时覆盖快速连续点击的场景
3. 在 Android 和 iOS 上分别验证行为
4. 考虑使用键盘监听事件来协调表单高度变化

总结

React Native Bottom Sheet 中的 TextInput 自动聚焦问题是一个典型的布局计算与动画协调问题。虽然目前有临时解决方案可用，但开发者应该密切关注官方更新，以获得更稳定的修复方案。在实现类似功能时，建议充分测试各种边界条件，确保用户体验的一致性。