React Native中如何在键盘上添加可收起键盘的最小化/下拉类按键？

原生系统键盘不支持直接在按键输入区域内嵌自定义按钮，要实现视觉上“键盘上有明确收起入口”的效果，通用做法是在键盘顶部挂载自定义工具条，这个工具条会跟随键盘弹出、收起，用户感知上就是键盘界面的一部分。

核心基础逻辑 #

• 完全不需要改动你已经写好的Keyboard.dismiss()收键盘逻辑，只要给工具条的触发按钮绑定同样的方法即可
• 通过RN内置的键盘事件API监听键盘的弹出/收起状态、动态高度，实现工具条和键盘的位置、高度匹配，不会出现错位
• 工具条可以完全自定义样式，支持做向下三角、最小化图标等任意视觉效果，替代默认的文字按钮

不同平台的实现差异 #

• iOS 端简化实现
  可以直接给TextInput配置inputAccessoryView属性传入自定义的工具条组件，系统会自动完成位置吸附，不需要手动监听键盘高度，体验和原生键盘自带的工具条完全一致，是iOS端成本最低的实现方式。
• Android 端手动适配
  Android系统不支持给原生键盘挂载自定义附属视图，需要手动监听keyboardDidShow/keyboardDidHide事件，获取键盘弹出的实际高度，通过绝对定位把工具条固定在屏幕底部，动态匹配键盘高度，实现和iOS一致的视觉效果。

通用实现代码示例 #

import React, { useState, useEffect } from 'react';
import { View, TextInput, TouchableOpacity, Text, Keyboard, Platform } from 'react-native';

// 自定义收起按钮工具条，可按需替换成向下三角、最小化图标样式
const KeyboardDismissBar = () => (
  <View style={{
    height: 44,
    backgroundColor: '#f0f0f0',
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    paddingHorizontal: 16
  }}>
    <TouchableOpacity onPress={() => Keyboard.dismiss()}>
      <Text style={{ color: '#007aff', fontSize: 16 }}>收起键盘</Text>
    </TouchableOpacity>
  </View>
);

export default function InputPage() {
  const [kbHeight, setKbHeight] = useState(0);

  useEffect(() => {
    // 监听键盘弹出事件
    const showListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
      (event) => setKbHeight(event.endCoordinates.height)
    );
    // 监听键盘收起事件
    const hideListener = Keyboard.addListener(
      Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide',
      () => setKbHeight(0)
    );

    // 页面销毁时移除事件监听，避免内存泄漏
    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <View style={{ flex: 1, backgroundColor: '#fff' }}>
      {/* 页面原有输入内容 */}
      <TextInput
        placeholder="输入框"
        style={{ margin: 20, padding: 12, borderWidth: 1, borderColor: '#ddd' }}
      />

      {/* 跟随键盘移动的收起按钮条 */}
      <View style={{ position: 'absolute', bottom: kbHeight, left: 0, right: 0 }}>
        <KeyboardDismissBar />
      </View>
    </View>
  );
}

实操注意事项 #

• 你之前实现的点击页面空白收起键盘的逻辑可以完全保留，和自定义按钮的收键盘逻辑互不影响
• 如果使用了第三方UI库的输入组件，只需要把工具条组件挂在对应的键盘附属位置即可，核心逻辑没有变化
• 安卓端如果遇到键盘高度获取不准的问题，需要检查应用的android:windowSoftInputMode配置，确保为adjustResize模式

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