显示键盘时如何修改组件视图？

Question

早上好，这实际上是我在业界工作了几年后对StackOverflow的第一个问题（希望还不算太晚！）。

我正在作为React本机应用程序上的辅助项目。 我不明白键盘向上时视图如何变化。

当视图缩小时（因为显示了键盘），视图彼此重叠。我希望它们仍然可以分开。

我有这张照片以重叠的视角显示了我的意思：

我认为这可能与填充/边距有关，但是我将它们全部删除，仍然是同样的问题。现在，我知道输入高度是由绝对数字定义的，这就是它不缩水的原因，因此它比实际视图大，这就是它重叠的原因。

当视图缩小时，如何保持输入的高度固定，又要保持间隔？？

非常感谢您！

编辑：我正在编辑，因为我感觉无法表达我对它如何工作的想法。 （我应该删除以前的解释吗？如果有人编辑并删除了第一个解释，请保留图片。）

没有键盘的初始视图必须是这样的：

输入和按钮必须在底部，视图必须尽可能高。

打开键盘时（通过单击输入之一），我希望列表缩小以使按钮和输入仍然可见，并以很小的边距/填充隔开，并且列表已占用了剩余空间（再次尊重视图之间的微小分隔）。打开键盘时，列表仍可滚动（它是FlatList）。

再次感谢您，对您的错误解释表示歉意。

Answer 1

您可以尝试将内容包装在ScrollView中，而不是像这样的普通View：

<ScrollView style={{flex: 1}}>/* your content here */</ScrollView>

因此，当键盘显示出来时，您的元素不会重叠，因为它们占据了相同的空间，但是您可以滚动查看键盘隐藏的元素。

Answer 2

我认为您可以尝试这样的事情：

<View>
    <ScrollView>
        <KeyboardAvoidingView style={{flex:1}} behavior={Platform.select({ios:"padding", android:null })} keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}>
            {/*Your buttons and other elements here...*/}
        </KeyboardAvoidingView>
    </ScrollView>
<View>

为此，您还必须从KeyboardAvoidingView导入ScrollView和react-native。