反应本机键盘避免视图，防止滚动

Question

我的登录屏幕非常稀疏：

其代码为：

$('a[href$="#rateModal"]').on( "click", function() {
    $('.modal-body').load('../assets/reviews.php',function(){
        $('#RateModal').modal({show:true});
    });
});

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled={true} > <View style={styles.logoContainer}> <Text style={styles.logoText}>Foo</Text> <Image source={logo} /> </View> <View style={styles.loginContainer}> <TextInput style={{ height: 40, width: 300, borderColor: PrimaryColour, borderBottomWidth: 1, textAlign: 'center', }} multiline={false} autoCapitalize="characters" autoComplete="off" autoCorrect={false} onSubmitEditing={() => Keyboard.dismiss()} returnKeyType="done" placeholder="Username" /> <TextInput style={{ height: 40, width: 300, borderColor: PrimaryColour, borderBottomWidth: 1, textAlign: 'center', }} multiline={false} autoComplete="off" autoCorrect={false} autoCapitalize="none" secureTextEntry={true} onSubmitEditing={() => Keyboard.dismiss()} returnKeyType="done" placeholder="Password" /> <PrimaryButton text="Login" onPress={this.handleLogin}/> </View> </KeyboardAvoidingView> 在哪里：

styles

当前，单击任一输入将导致键盘出现，并且页面上的填充减少。第一个输入在键盘上方可见，但第二个则不可见。此外，它会将页面向上滚动，以使徽标仅可见一半，而“ Foo”则不可见。

我故意在页面上留出足够的空间，以便可以减少填充量，使所有元素以及键盘都可以看到。由于整个视图都包裹在KAV中，因此我以为会发生这种情况，但事实并非如此。

我期望这样：

• Foo
• 徽标
• Input1
• Input2
• 按钮
• 键盘

充分减少填充物以使其完全适合