我使用图像作为背景,在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,
}
});
字符串
当键盘未打开时,在点击输入按钮之前,背景图像覆盖整个屏幕。当用户点击输入时,背景图像向上移动。
点击输入前
的数据
点击输入后
的
1条答案
按热度按时间t9eec4r01#
试试这个:
字符串