键盘避免视图缩小

Question

我希望我的页面向上滚动，以便用户可以正确输入其电子邮件和密码。因此，我使用的是 KeyboardAvoidingView。 但是，当我使用它时，它会缩小我的 textinput picture 而不是向上移动页面。如果没有键盘，我的应用看起来像这样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

这是您的代码的解决方案，我已在此小吃中使用您提供的代码解决了这个问题。

Expo Snack with CSS fixes to avoid keyboard