如何实现BottomSheet随键盘上移？已尝试KeyboardAvoidingView等组件无效

方案1：使用@gorhom/bottom-sheet官方配置（推荐） #

如果你用的是React Native生态中主流的@gorhom/bottom-sheet库，直接通过官方属性就能实现需求：

• 先确保安装最新版本：npm install @gorhom/bottom-sheet
• 在BottomSheet组件中添加keyboardBehavior="extend"属性，该配置会让BottomSheet自动跟随键盘高度上移：

import BottomSheet from '@gorhom/bottom-sheet';

// 组件内部渲染
<BottomSheet
  snapPoints={['30%', '70%']}
  keyboardBehavior="extend"
  enablePanDownToClose={true}
>
  {/* 你的输入表单区域 */}
  <TextInput placeholder="请输入内容" style={{ padding: 16, borderWidth: 1 }} />
</BottomSheet>

方案2：手动监听键盘事件调整位置（自定义BottomSheet适用） #

如果是自定义BottomSheet或使用其他不支持自动适配的库，可通过React Native的Keyboard模块手动监听键盘状态，动态调整BottomSheet位置：

import { Keyboard, Animated, View, TextInput } from 'react-native';
import { useEffect, useRef } from 'react';

const CustomBottomSheet = () => {
  const bottomSheetY = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    // 监听键盘弹出
    const showListener = Keyboard.addListener('keyboardWillShow', (event) => {
      Animated.timing(bottomSheetY, {
        toValue: -event.endCoordinates.height,
        duration: event.duration,
        useNativeDriver: true,
      }).start();
    });

    // 监听键盘收起
    const hideListener = Keyboard.addListener('keyboardWillHide', (event) => {
      Animated.timing(bottomSheetY, {
        toValue: 0,
        duration: event.duration,
        useNativeDriver: true,
      }).start();
    });

    return () => {
      showListener.remove();
      hideListener.remove();
    };
  }, []);

  return (
    <Animated.View
      style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        backgroundColor: '#fff',
        padding: 16,
        transform: [{ translateY: bottomSheetY }],
      }}
    >
      <TextInput placeholder="请输入内容" style={{ borderWidth: 1, padding: 8 }} />
    </Animated.View>
  );
};

方案3：修正KeyboardAvoidingView的使用方式 #

如果之前用KeyboardAvoidingView没生效，大概率是层级或属性配置问题，调整如下：

• 确保KeyboardAvoidingView包裹的是BottomSheet内部的输入内容，而非整个BottomSheet容器
• 根据平台设置正确的behavior属性：

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

<BottomSheet>
  <KeyboardAvoidingView
    behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    style={{ flex: 1, width: '100%' }}
  >
    <TextInput placeholder="请输入内容" style={{ padding: 16, borderWidth: 1 }} />
  </KeyboardAvoidingView>
</BottomSheet>

额外配置（Android必备） #

在Android项目的AndroidManifest.xml中，给主Activity添加windowSoftInputMode配置，确保页面能响应键盘高度变化：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
</activity>

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