Android 当键盘不在屏幕上时使用文本输入时，背景图像很好，但当键盘在屏幕上时，图像底部位于键盘上方

当键盘不在屏幕上时，使用文本输入时，我遇到了这个问题背景图像很好，但当键盘在屏幕上时，图像底部位于键盘上方。。下面给出了登录页面和图像的代码。我尝试使用键盘回避视图和安全区域视图，但似乎没有任何效果

LoginScreen.js

  import React from "react";
  import  {SafeAreaView,TextInput,Image,View,Text,StatusBar,StyleSheet,KeyboardAvoidingView,TouchableOpacity, TouchableOpacityComponent} from "react-native";
  import Icon from "react-native-vector-icons/Ionicons";

export default class LoginScreen extends React.Component{

state={
    name:"",
    error:""
}

onPressIcons=()=>{
    this.props.navigation.navigate("About")
}

onPressNextPage=()=>{
    if(this.state.name===""){
        this.setState({error:"Enter A User Name"})
    }
    else{
        this.props.navigation.navigate("Navigate",{name:this.state.name})
    }
}

render(){
    return(
        <KeyboardAvoidingView style={styles.container}>
            <StatusBar barStyle="dark-content" backgroundColor="transparent"/>

            <KeyboardAvoidingView style={styles.form} >

                <TouchableOpacity style={styles.icon} onPress={this.onPressIcons}>
                    <Icon name="ios-contact" size={45} color="#108786"/>
                </TouchableOpacity>

                <Image source={require("../assets/logo.png")} style={styles.image}/>

                <Text style={styles.error}>{this.state.error}</Text>

                <Text style={styles.username}>Username</Text>

                <TextInput style={styles.input} 
                    placeholder="UserName" 
                    onChangeText={name =>{this.setState({name})}}
                    value={this.state.name}/>

            </KeyboardAvoidingView>


        </KeyboardAvoidingView>
    )
    }
   }
 const styles=StyleSheet.create({
container:{
    flex:0,
    backgroundColor:"#108786",
    justifyContent:"center",
    alignItems:"center"
},
form:{
    alignContent:"center",
    alignSelf:"center",
    alignItems:"center",
    elevation:24,
    height:"100%",
    width:"100%",
    backgroundColor:"#FFF",
    borderRadius:45,
    borderTopStartRadius:0,
    borderTopEndRadius:0,
    borderBottomStartRadius:0,
    borderBottomEndRadius:600
   },
   icon:{
        marginTop:90,
        marginLeft:300
   },
   image:{
       height:150,
       width:200,
       alignSelf:"center"
   },
   error:{
        marginTop:7,
        alignSelf:"center",
        color:"red",
        fontSize:15
   },
   username:{
        color:"#108786",
        fontSize:27,
        fontWeight:"bold",
        alignSelf:"center",
        justifyContent:"center",
        marginRight:280,
        marginTop:10
    },
    input:{
        marginTop:15,
        marginRight:100,
        height:50,
        width:380,
        marginLeft:100,
        borderWidth:StyleSheet.hairlineWidth,
        borderColor:"#018786",
        borderRadius:10,
        fontWeight:"600",
        paddingHorizontal:16,
        alignSelf:"center",
        borderBottomRightRadius:30,
        borderTopRightRadius:30
    }
     })

从“React”导入React；
从“react native”导入{SafeAreaView、TextInput、图像、视图、文本、状态栏、样式表、键盘AvoidingView、TouchableOpacity、TouchableOpacityComponent}；
从“反应本机矢量图标/离子图标”导入图标；
导出默认类LoginScreen扩展React.Component{
陈述={
姓名：“，
错误：“
}
按图标=（）=>{
this.props.navigation.navigate（“关于”）
}
按下一页=（）=>{
if（this.state.name==“”）{
this.setState（{错误：“输入用户名”}）
}
否则{
this.props.navigation.navigate（“导航”，{name:this.state.name}）
}
}
render（）{
返回(
{this.state.error}
用户名
{this.setState（{name}}}
值={this.state.name}/>
)
}
}
const styles=StyleSheet.create({
容器：{
弹性：0，
背景颜色：“108786”，
辩护内容：“中心”，
对齐项目：“中心”
},
表格：{
内容：“中心”，
对准自己：“居中”，
对齐项目：“中心”，
标高：24，
高度：“100%”，
宽度：“100%”，
背景颜色：“FFF”，
边界半径：45，
边界半径：0，
borderTopEndRadius:0，
塔迪乌斯：0，
borderBottomEndRadius:600
},
图标：{
玛金托普：90，
保证金左：300
},
图片：{
身高：150，
宽度：200，
自我定位：“中心”
},
错误：{
玛金托普：7，
对准自己：“居中”，
颜色：“红色”，
尺寸：15
},
用户名：{
颜色：#108786“，
尺寸：27，
fontWeight：“粗体”，
对准自己：“居中”，
辩护内容：“中心”，
marginRight:280，
玛金托普：10
},
输入：{
玛金托普：15，
marginRight:100，
身高：50，
宽度：380，
边缘左：100，
borderWidth:StyleSheet.hairlineWidth，
边框颜色：“018786”，
边界半径：10，
重量：“600”，
水平方向：16，
对准自己：“居中”，
边界半径：30，
BorderTopRight半径：30
}
})

您正在包装键盘，以避免在登录屏幕上出现新组件。您可以仅使用视图组件。那应该行得通

谢谢你它行得通。。。我可能找到了另一个解决办法。通过将设备的宽度和高度（使用尺寸）分配到键盘上，避免出现gView。很好，很高兴我能提供帮助