При использовании ввода текста, когда клавиатура не на экране, фоновое изображение в порядке, но когда клавиатура находится на экране, изображение снизу над клавиатурой - PullRequest
Новая
       72

При использовании ввода текста, когда клавиатура не на экране, фоновое изображение в порядке, но когда клавиатура находится на экране, изображение снизу над клавиатурой

0 голосов
/ 15 апреля 2020

Я получил эту проблему при использовании ввода текста, когда клавиатура не на экране, фоновое изображение в порядке, но когда клавиатура находится на экране, изображение снизу над клавиатурой .. код страницы входа и изображения приведен ниже. Я попытался с помощью Клавиатура избегает просмотра и безопасного просмотра, но, кажется, ничего не получается

Without using Keyboard

When Using Keyboard

Экран входа в систему. 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
    }
     })
...