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

Question

我在使用文本输入时遇到了这个问题当键盘不在屏幕上时背景图像很好但是当键盘在屏幕上时图像底部位于键盘上方..下面给出了登录页面和图像的代码我试过了使用 Keyboard avoid view 和 safeareaview 但似乎没有任何效果

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

Answer 1

您在整个登录屏幕上包裹了 KeyboardAvoidingVIew 组件。您可以只使用一个视图组件。那应该很好用

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

When using Text Input When Keyboard is not on screen the background image is fine but when keyboard is on screen image bottom comes above the keyboard

android

react-native

react-native-android

react-native-ios

react-native-navigation