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

tvokkenx  于 6个月前  发布在  React
关注(0)|答案(1)|浏览(80)

我使用图像作为背景,在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,
  }

});

字符串
当键盘未打开时,在点击输入按钮之前,背景图像覆盖整个屏幕。当用户点击输入时,背景图像向上移动。

点击输入前


的数据

点击输入后


t9eec4r0

t9eec4r01#

试试这个:

[...]

import { Dimensions } from 'react-native';

[...]

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

[...]

字符串

相关问题