android - 为什么KeyboardAvoidingView在React Native中不起作用？

我已经在我的“登录”页面中添加了KeyboardAvoidingView，当用户单击用户名或密码字段时，他们都应该稍微“向上移动”，以便用户至少可以看到“登录”按钮，以便能够单击它。 。但是，目前没有任何反应。有谁知道如何使它在React Native中正常工作？

    return (
        <ImageBackground source={require('../../assets/signinBG.jpg')} style={styles.backgroundImage}>
            <KeyboardAvoidingView style={styles.formContainer} behavior="padding" enabled>
                <View style={styles.logoContainer}>
                    <Image source={require('../../assets/mb_logo.png')}
                           style={styles.logo}/>
                </View>
                <View style={styles.loginContainer}>
                    <StatusBar
                        barStyle={'light-content'}/>
                    <View style={styles.usernameInputBar}>
                        {this.state.showUsernameLabel &&
                            <Text style={styles.formLabel}>username</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="username"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCorrect={false}
                            autoFocus={autoFocus}
                            returnKeyType={'next'}
                            autoCaptialize={'none'}
                            keyboardType={'email-address'}
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            onSubmitEditing={() => this.passwordInput.focus()}
                            onChangeText={(text) => this.handleUsernameChange(text)}
                            value={this.state.email}
                        />
                    </View>
                    <View style={styles.passInputBar}>
                        {this.state.showPassowrdLabel &&
                            <Text style={styles.formLabel}>password</Text>
                        }
                        <TextInput
                            underlineColorAndroid="transparent"
                            style={styles.textInput}
                            placeholder="password"
                            placeholderTextColor="rgba(255,255,255,0.7)"
                            autoCapitalize="none"
                            autoFocus={autoFocus}
                            returnKeyType={'go'}
                            keyboardType={'default'}
                            secureTextEntry
                            enablesReturnKeyAutomatically={true}
                            onFocus={() => this.onFocus()}
                            onBlur={() => this.onBlur()}
                            ref={(input) => this.passwordInput = input}
                            onChangeText={(text) => this.handlePasswordChange(text)}
                            value={this.state.password}
                        />
                    </View>

                    <TouchableOpacity style={[styles.buttonContainer, updateButton ? styles.buttonActive : styles.buttonDefault]} onPress={() => this.onSubmitEmail()}>
                        {this.renderSignInText()}
                    </TouchableOpacity>
                    <TouchableOpacity onPress={() => this.showForgotLogin()}>
                        <Text style={styles.forgotLogin}>Forgot username of password?</Text>
                    </TouchableOpacity>
                </View>
            </KeyboardAvoidingView>
        </ImageBackground>
    )

这也是我制作的视频，以演示这一点：

https://www.youtube.com/watch?v=Sr-z4VpZKg0&feature=youtu.be

另外，这是一些css：

formContainer: {
    flex: 1,
    position: 'absolute'
},
backgroundImage: {
    flex: 1,
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor:'rgba(0,0,0,0.45)',
    width: null,
    height: null,
},

最佳答案

你应该设置

behavior="height"

"padding"适用于iOS。