Клавиатура, Избегающая Сокращения Представления

Question

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

Мой код следующий для этой страницы:

export default class LoginScreen extends React.Component {
    constructor(props) {
        super(props)
    }
    state = {
        email: '',
        password: ''
    }
    handleEmail = (text) => {
        this.setState({ email: text })
    }
    handlePassword = (text) => {
        this.setState({ password: text })
    }

    render() {
        return (
            <View style={styles.container}>
                    <ImageBackground source={require('../pics/main.png')} style={styles.background}>
                    <KeyboardAvoidingView behavior="padding" style={{ flex: 1}} >

                        <Text style={styles.title2}>WELCOME</Text>
                        <TextInput
                            style={styles.inputEmail}
                            placeholder="Enter Email"
                            onChangeText={this.handleEmail}
                        />
                        <TextInput
                            style={[styles.inputEmail, styles.inputPassword]}
                            placeholder="Enter password"
                            onChangeText={this.handlePassword}
                        />
                        <View style={styles.buttons}>
                            <TouchableOpacity style={styles.login} onPress={() => this.props.navigation.navigate('MainScreen')} >
                                <Text style={styles.loginText}>LOGIN</Text>
                            </TouchableOpacity>
                            <TouchableOpacity
                                style={styles.login} onPress={() => this.props.navigation.navigate('SignUpScreen')}>
                                <Text style={styles.loginText}>SIGN UP</Text>
                            </TouchableOpacity>
                        </View>
                        </KeyboardAvoidingView>

                    </ImageBackground>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    area: {
        flex: 1
    },
    container: {
        flex: 1,
    },
    background: {
        flex: 1,
        resizeMode: "cover",
        width: '100%',
        height: '100%'
    },
    title2: {
        paddingTop: 10,
        color: color.primary,
        fontSize: 25,
        alignSelf: 'center',
        justifyContent: 'flex-start'
    },
    inputEmail: {
        borderWidth: 2,
        borderColor: color.primary,
        borderRadius: 10,
        width: '50%',
        height: '5%',
        marginTop: 100,
        alignSelf: 'center',
        backgroundColor: color.secondary
    },
    inputPassword: {
        marginTop: 10
    },
    buttons: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        marginTop: 30,
        marginLeft: 70,
        marginRight: 70,
    },
    login: {
        borderColor: color.primary,
        borderRadius: 20,
        borderWidth: 2,
        width: '40%',
        height: '118%',
        backgroundColor: color.primary
    },
    loginText: {
        alignSelf: 'center',
        marginTop: 5,
        marginBottom: 1,
        color: 'white'
    }
});

Есть идеи о том, что я делаю неправильно?

ОБНОВЛЕНИЕ: чтобы избежать сжатия, поместите ширину и высоту контейнера ввода текста не в процентах, а в виде действительных чисел: inputEmail -> ширина: 200, высота: 35,

Answer 1

Вот решение с вашим кодом, я исправил это в этой закуске с вашим предоставленным кодом.

Экспо Снэк с CSS исправлениями, чтобы избежать клавиатуры