在React Native中打开键盘时如何防止图像向上移动？

Question

我在 React Native 中使用 ImageBackground 使用图像作为背景，效果很好，但是当键盘打开时图像向上移动，我尝试了不同的方法，但它不起作用。我尝试调整大小模式，但也不起作用。

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,
  }

});

键盘未打开时点击输入按钮之前。当用户点击输入时背景图像覆盖全屏背景图像向上移动。

点击输入之前

点击输入后

Answer 1

试试这个：

[...]

import { Dimensions } from 'react-native';

[...]

const styles = StyleSheet.create({
  backGroundImage: {
    width: "100%",
    height: Dimensions.get('window').height,
  }

[...]