React Native中如何避免键盘弹出时背景图片上移？

我在React Native中使用ImageBackground组件设置背景图片，正常状态下显示效果良好，但点击输入框弹出键盘时，背景图片会向上移动。尝试过调整resizeMode等方法，均未解决问题。

现有代码 #

import { StyleSheet, Text, View, ImageBackground,KeyboardAvoidingView } from 'react-native'
import React, { useState } from 'react'
import Icon from 'react-native-vector-icons/MaterialIcons';
import { ScrollView, TextInput, TouchableOpacity } from 'react-native-gesture-handler'
import { Input } from '@rneui/themed';


export default function Home() {
  const [value,setValue]=useState("")
  return (
    
    <ImageBackground source={require('../images/back.png')} style={styles.backGroundImage} resizeMode="cover">
      <View style={styles.headerContainer}>
        <Icon name="menu" size={30} color="#a2a2db" style={{ width: 20 }} />
        <Icon name="account-circle" size={33} color="#a2a2db" />
      </View>
      <View style={styles.mainTextContainer}>
        <Text style={styles.mainTextBlock}>
          Hello
        </Text>
        <Text style={styles.mainTextExpanation}>
          This is wonderfull app you will enjoy working on it !!!
        </Text>
      </View>
      <View>
        <View style={{marginTop:30,flexDirection:'row',alignItems:"center",justifyContent:"center"}}>
          <View style={{backgroundColor:"white",borderBottomLeftRadius:20,borderTopLeftRadius:20,alignItems:"center",justifyContent:"center",height:35}}>
            <Icon name='search' color="#a2a2db" size={25} style={{paddingLeft:10}}/>
          </View>
          <TextInput style={{backgroundColor:"white",width:"70%",height:35,borderTopRightRadius:20,borderBottomRightRadius:20}}/>
        </View>
      </View>
    </ImageBackground>
  )
}



const styles = StyleSheet.create({
  backGroundImage: {
    
    width: "100%",
    height: "100%",
  },
  headerContainer: {
    flexDirection: 'row',
    marginTop: 40,
    paddingHorizontal: 40,
    justifyContent: "space-between",
    alignItems: "center"
  },
  mainTextBlock: {
    fontSize: 40,
    fontFamily: "RobotoBold",
    color: "#522289"
  },
  mainTextContainer: {
    paddingHorizontal: 40,
    marginTop: 25
  },
  mainTextExpanation: {
    fontSize: 15,
    fontFamily: "RobotoRegular",
    paddingVertical: 10,
    lineHeight: 22,
    color: "#a2a2db",
    paddingRight: 80,
  }

});

问题现象 #

• 点击输入框前
  

• 点击输入框后
  

解决方法 #

方法1：调整布局属性+KeyboardAvoidingView适配

将ImageBackground的宽高设置改为flex:1，同时用KeyboardAvoidingView包裹，适配不同平台的键盘行为：

import { StyleSheet, Text, View, ImageBackground, KeyboardAvoidingView, Platform } from 'react-native'
// 保留其他导入代码

export default function Home() {
  const [value,setValue]=useState("")
  return (
    <KeyboardAvoidingView 
      style={{flex:1}}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
      <ImageBackground source={require('../images/back.png')} style={styles.backGroundImage} resizeMode="cover">
        {/* 原有页面内容 */}
      </ImageBackground>
    </KeyboardAvoidingView>
  )
}

const styles = StyleSheet.create({
  backGroundImage: {
    flex: 1,
    width: undefined,
    height: undefined,
  },
  // 保留其他样式
});

方法2：修改AndroidManifest配置（仅Android）

在android/app/src/main/AndroidManifest.xml中，给MainActivity添加软键盘模式配置，让布局自动调整：

<activity
  android:name=".MainActivity"
  android:windowSoftInputMode="adjustResize">
  <!-- 其他原有配置 -->
</activity>

方法3：用ScrollView包裹页面内容

如果页面存在滚动需求，可将ImageBackground内的内容放入ScrollView，同时设置键盘相关属性：

<ImageBackground source={require('../images/back.png')} style={styles.backGroundImage} resizeMode="cover">
  <ScrollView style={{flex:1}} keyboardDismissMode="on-drag">
    {/* 原有header、文本、输入框等内容 */}
  </ScrollView>
</ImageBackground>

问题原因 #

键盘弹出时系统会调整窗口尺寸，原有ImageBackground的width:100%和height:100%是基于初始窗口高度计算的，导致背景无法自适应新尺寸而上移。改用flex:1后，背景会自动填充调整后的可用空间，配合KeyboardAvoidingView或系统配置可完成跨平台适配。

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