React Native Bottom Sheet 键盘处理最佳实践-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00035/article/details/148443002

React Native Bottom Sheet 键盘处理最佳实践

react-native-bottom-sheet A performant interactive bottom sheet with fully configurable options 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet

在移动应用开发中，底部弹窗(Bottom Sheet)与键盘的交互是一个常见但容易出问题的场景。gorhom/react-native-bottom-sheet 项目在 v4 版本中对键盘处理进行了重大改进，本文将深入解析其实现原理和使用方法。

键盘处理的挑战

在移动端应用中，当底部弹窗内的输入框获得焦点时，键盘弹出会带来两个主要问题：

键盘可能会遮挡输入框
键盘高度会影响底部弹窗的布局

特别是在 Android 和 iOS 平台上，键盘行为存在差异，这增加了处理复杂度。

内置解决方案

gorhom/react-native-bottom-sheet 提供了开箱即用的键盘处理方案：

1. BottomSheetTextInput 组件

这是项目提供的预集成输入框组件，内部已经处理了键盘交互逻辑。使用它是最简单的解决方案：

import { BottomSheetTextInput } from "@gorhom/bottom-sheet";

// 在底部弹窗中使用
<BottomSheetTextInput 
  value={text}
  onChangeText={setText}
  style={styles.input}
/>

2. 自定义键盘行为

项目提供了三个关键属性来自定义键盘行为：

keyboardBehavior: 控制键盘出现时底部弹窗的行为
- interactive (默认): 弹窗会随键盘上移
- extend: 弹窗高度会扩展以适应键盘
- fillParent: 弹窗会填充可用空间
keyboardBlurBehavior: 控制键盘消失时的行为
- none (默认): 不做任何处理
- restore: 恢复弹窗到原始位置
android_keyboardInputMode (仅Android): 控制键盘输入模式
- adjustResize: 调整窗口大小
- adjustPan: 平移窗口内容

自定义输入框集成

如果需要使用第三方输入框组件，可以按照以下步骤集成键盘处理逻辑：

从 BottomSheetTextInput 组件中复制 handleOnFocus 和 handleOnBlur 逻辑
在你的自定义输入框中实现相同的焦点处理逻辑
确保正确处理键盘事件

实际应用示例

下面是一个完整的键盘处理实现示例：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import BottomSheet, { BottomSheetTextInput } from '@gorhom/bottom-sheet';

const KeyboardHandlingExample = () => {
  const snapPoints = ['25%', '50%'];

  return (
    <View style={styles.container}>
      <BottomSheet
        snapPoints={snapPoints}
        keyboardBehavior="extend"
        keyboardBlurBehavior="restore"
      >
        <View style={styles.content}>
          <BottomSheetTextInput
            placeholder="请输入内容"
            style={styles.input}
          />
        </View>
      </BottomSheet>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#f5f5f5',
  },
  content: {
    flex: 1,
    padding: 16,
  },
  input: {
    height: 40,
    borderColor: 'gray',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
  },
});

export default KeyboardHandlingExample;