React Native Modalize组件键盘弹出时抽屉上移的问题求助

嘿，我之前刚好碰到过一模一样的问题，咱们来一步步把它解决掉！

你现在遇到的抽屉跟着键盘上移的情况，其实是因为你开启了Modalize自带的键盘避让配置，咱们直接从核心配置和细节优化入手调整：

第一步：修改Modalize的键盘避让属性 #

你当前设置的avoidKeyboardLikeIOS={true}和keyboardAvoidingBehavior="height"就是让抽屉上移的关键原因，咱们把这俩调整一下：

• 把avoidKeyboardLikeIOS改成false，直接关闭Modalize模拟iOS的键盘避让行为
• 移除keyboardAvoidingBehavior="height"（或者直接删掉这个属性），避免组件自动调整自身高度来适配键盘

第二步：解决TextInput被键盘遮挡的问题 #

关闭键盘避让后，可能会出现TextInput被键盘挡住的情况，咱们可以通过监听键盘高度，动态给抽屉添加底部内边距来解决：

首先在组件里添加状态和键盘监听逻辑：

import { Keyboard } from 'react-native';
import { useState, useEffect, useRef } from 'react';

// ... 其他已有代码
const modalRef = useRef(null);
const [keyboardHeight, setKeyboardHeight] = useState(0);

useEffect(() => {
  // 监听键盘弹出事件，记录键盘高度
  const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
    setKeyboardHeight(e.endCoordinates.height);
  });
  // 监听键盘收起事件，重置高度
  const hideListener = Keyboard.addListener('keyboardDidHide', () => {
    setKeyboardHeight(0);
  });

  // 组件卸载时清理监听
  return () => {
    showListener.remove();
    hideListener.remove();
  };
}, []);

然后修改抽屉的样式，把动态计算的底部内边距加上：

<View style={[styles.drawer, { paddingBottom: responsiveWidth(5) + keyboardHeight }]}>
  {/* 抽屉内部的文本、输入框内容保持不变 */}
</View>

修改后的完整代码示例 #

import { Modalize } from 'react-native-modalize';
import { View, Text, TextInput, Keyboard } from 'react-native';
import { useState, useEffect, useRef } from 'react';

// ... 其他依赖和状态定义（比如你用到的name状态）

export default function YourComponent() {
  const modalRef = useRef(null);
  const [keyboardHeight, setKeyboardHeight] = useState(0);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardHeight(e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardHeight(0);
    });

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

  return (
    <Modalize 
      ref={modalRef} 
      handlePosition="inside" 
      avoidKeyboardLikeIOS={false} 
      modalHeight={responsiveHeight(70)} 
    >
      <View style={[styles.drawer, { paddingBottom: responsiveWidth(5) + keyboardHeight }]}>
        <View style={{flexDirection: 'row'}}>
          <Text style={{fontSize: responsiveFontSize(2.8), marginTop: responsiveHeight(3)}} >Current name: </Text>
          <Text style={{fontSize: responsiveFontSize(2.8), marginTop: responsiveHeight(3)}} >{name}</Text>
        </View>
        <TextInput 
          autoCorrect={false} 
          autoComplete="off" 
          style={styles.input} 
          placeholder="New name" 
        />
      </View>
    </Modalize>
  );
}

// 样式定义
const styles = {
  drawer: {
    backgroundColor: '#ffffff',
    padding: responsiveWidth(5),
    borderTopLeftRadius: responsiveFontSize(2.5),
    borderTopRightRadius: responsiveFontSize(2.5),
  },
  input: {
    // 这里可以补全你原来的input样式，比如边框、内边距等
    borderWidth: 1,
    borderColor: '#cccccc',
    borderRadius: 8,
    paddingVertical: 10,
    paddingHorizontal: 12,
    marginTop: responsiveHeight(2),
  }
};

为什么这样修改？ #

• 关闭avoidKeyboardLikeIOS后，Modalize就不会再跟着键盘的弹出/收起调整自身位置，抽屉就能稳稳固定在屏幕底部
• 通过监听键盘高度动态添加底部内边距，既能保证TextInput不被键盘挡住，又不会触发整个抽屉的上移

内容来源于stack exchange