React Native Android键盘弹出时布局收缩问题求助

问题描述 #

我的React Native应用在iOS端运行正常，但在Android端点击TextInput弹出键盘时，整个屏幕布局会出现收缩现象。我希望实现键盘覆盖底部的保存按钮与图标容器，而非压缩布局的效果。目前已尝试使用KeyboardAvoidingView和KeyboardAwareScrollView，但均未解决问题。

正常布局与异常布局对比：

• 正常布局：页面底部显示保存按钮和图标选择区域
• 键盘弹出后：底部区域被压缩，整体布局向上收缩

核心原因 #

Android系统默认的键盘适配模式是adjustResize，会自动调整页面布局大小以腾出键盘空间，这就是导致布局收缩的根本原因。

解决步骤 #

1. 修改AndroidManifest.xml配置 #

找到项目中的android/app/src/main/AndroidManifest.xml文件，修改主Activity的android:windowSoftInputMode属性：

<activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustPan" <!-- 修改此处 -->
    android:exported="true">

• adjustPan：键盘弹出时会将整个页面向上平移，保证输入框可见，底部的按钮和图标容器会被键盘覆盖，不会压缩布局
• adjustNothing：键盘弹出时页面完全保持不动，适合输入框在页面上方的场景（若输入框在底部会被遮挡）

2. 优化布局结构（可选） #

为确保底部组件固定在屏幕底部，避免被上方内容影响，可给底部容器添加绝对定位：

修改Chargeneration组件的样式：

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: "cover",
  },
  overlay: {
    flex: 1,
    position: 'relative', // 作为绝对定位子元素的父容器
  },
  container: {
    flex: 1,
    padding: 10,
  },
  saveContainer: {
    position: 'absolute',
    bottom: 20,
    alignSelf: 'center',
    // 保留原有样式
    marginHorizontal: 20,
    height: 50,
    width: 150,
  },
});

同时调整Charfeatlist的放置位置，让它固定在保存按钮上方：

// 在Chargeneration组件的return中替换原有<Charfeatlist />的位置
<View style={{position: 'absolute', bottom: 80, left: 0, right: 0}}>
  <Charfeatlist />
</View>

3. 移除冲突组件 #

如果之前添加的KeyboardAvoidingView或KeyboardAwareScrollView没有起到作用，可暂时移除这些组件，避免和系统的键盘适配模式冲突。

修改后的完整Chargeneration组件示例 #

import React, { useState } from 'react'
import { useNavigation } from '@react-navigation/native'

import { Text, Button } from '@rneui/themed';
import { View, Image, StyleSheet, ImageBackground, TextInput, TouchableWithoutFeedback, Keyboard } from "react-native";

import Charfeatlist from '../component/Charfeatlist';

const Chargeneration = () => {
  const navigation = useNavigation();

  const [value, setValue] = useState(0);
  const [selectedIndex, setSelectedIndex] = useState(0);

  const [isEditing, setIsEditing] = useState(false);
  const [text, setText] = useState('Name');
  const [editedText, setEditedText] = useState(text);

  const handleEditPress = () => {
    setIsEditing(true);
  };

  const handleSavePress = () => {
    setText(editedText);
    setIsEditing(false);
  };

  return (
    <ImageBackground source={require("../assets/bg-low-opasity.png")} style={styles.backgroundImage}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.overlay}>
          <View style={styles.container}>
            <View style={{ flex:1,borderWidth:2,padding:20,borderColor:'lightblue',paddingTop:25,borderRadius:8,backgroundColor:"lightgrey",alignItems:"center",justifyContent:"center"}}>  
              <Image
                style={{flex: 4,width:300,height:400,borderRadius:10}}
                resizeMode="contain"
                source={require('../assets/char.png')}
              />
              <View style={{flex:1,justifyContent:'center',alignItems: 'center',paddingBottom:20}}>
                <TextInput
                  placeholder="Enter text here"
                  style={{ borderWidth: 1, borderColor: 'gray', margin: 10 }}
                />
              </View>
            </View>  
          </View>
          <View style={styles.saveContainer}>
            <Button 
              title="Save"
              buttonStyle={{
                backgroundColor: '#ff7400',
                borderRadius: 100,
              }}
              titleStyle={{ fontWeight: 'bold', fontSize: 20 }}
              loading={false}
              loadingProps={{ size: 'small', color: 'white' }} 
            />
          </View>
          <View style={{position: 'absolute', bottom: 80, left: 0, right: 0}}>
            <Charfeatlist />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </ImageBackground>
  )
}

const styles = StyleSheet.create({
  backgroundImage: {
    flex: 1,
    resizeMode: "cover",
  },
  overlay: {
    flex: 1,
    position: 'relative',
  },
  container: {
    flex: 1,
    padding: 10,
  },
  saveContainer: {
    position: 'absolute',
    bottom: 20,
    alignSelf: 'center',
    marginHorizontal: 20,
    height: 50,
    width: 150,
  },
})

export default Chargeneration

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