键盘与底部按钮重叠，直到刷新屏幕

Question

我有以下组件：一个 ScrollView 和一个 TextInput 和一个 Button。我想要顶部的 TextInput 和底部的 Button (justifyContent: 'space-between')。我运行这个组件来自 Android 本机应用程序。所以我正在开发 混合应用程序 。
问题：
当我点击 TextInput 时，键盘出现并且与底部 button 重叠。如果之后我通过下拉刷新 scrollView，底部 button 会出现在键盘上（我想要的）。
RefreshControl 渲染后发生了一些事情，设置了我的 button 的正确位置。但是我的组件看起来不太好，直到我拉动它并激活 react-native RefreshControl 组件。

我的代码：

import React, { Component } from 'react';
import { View, KeyboardAvoidingView, TextInput, RefreshControl, Button, ScrollView } from 'react-native';

export default class Authenticate extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false
    };
  }

  render() {
    return (
      <KeyboardAvoidingView enabled style={{ flex: 1 }}>
        <ScrollView
          contentContainerStyle={{ flex: 1, backgroundColor: 'gray', justifyContent: 'space-between' }}
          refreshControl={<RefreshControl refreshing={this.state.refreshing} />}>
          <View style={{ height: 200, backgroundColor: 'red' }}>
            <TextInput
              style={{
                height: 60,
                color: 'white',
                backgroundColor: 'gray',
                fontSize: 20,
                textAlign: 'center'
              }}
              value="Press Me"
            />
          </View>
          <Button style={{ backgroundColor: 'blue', width: '100%' }} title="Footer button" />
        </ScrollView>
      </KeyboardAvoidingView>
    );
  }
}

Answer 1

  Try this if you want to hide button and then it won't come above keyboard.Change your  AndroidManifest.xml file.
    <activity
                    android:name=".MainActivity"
                    android:label="@string/app_name"
                    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                    android:screenOrientation="portrait"
                    android:launchMode="singleTop"
                    android:windowSoftInputMode="adjustPan" //add this line
                    android:exported="true">

Answer 2

将此添加到清单文件的 activity 标记中

 android:windowSoftInputMode="adjustPan"

Answer 3

<KeyboardAvoidingView>替换为 <SafeAreaView> 并赋予其弹性 1.

Answer 4

正如 MD Naseem Ashraf 此处建议的那样，通过在我的清单文件中添加以下行解决了该问题 android:windowSoftInputMode="adjustResize"

键盘与底部按钮重叠，直到刷新屏幕

Keyboard overlaps bottom button until refreshing screen

android

react-native

keyboard

pull-to-refresh

hybrid