Question

我希望页面向上滚动，以便用户可以正确键入其电子邮件和密码。因此，我正在使用KeyboardAvoidingView。但是，当我使用它时，它会缩小我的文本输入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

键盘避免视图缩小

1 个答案: