Question

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

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

您将在LoginScreen上包装KeyboardAvoidingNew组件。您可以仅使用View组件。那应该很好

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

1 个答案: