如何将元素垂直居中放置

Question

我有一个带有表单（登录名，密码，按钮）的视图，当看不见键盘时，该视图应垂直居中。当键盘可见时，它应该在表单下方占用尽可能多的空间，然后向上移动表单，仅在必要时移动。

因此，在像iPhone SE这样的小型手机上，表格可能会向上移动很多；而在像XS Max这样的大型手机上，表格下的空间足以容纳键盘，因此该表格不应移动。 / p>

我正在尝试破解如何使用flex和KeyboardAvoidingView来实现它。

我的代码如下：

 <KeyboardAvoidingView style={{ flex: 1 }} behavior={'padding'}>
     <View style={{ flex: 1 } />
     <View style={{ flex: 0 }}>
         <Form />
     </View>
     <View style={{ flex: 1 }} />
 </KeyboardAvoidingView>

不幸的是，它用flex: 1缩小了两个视图，因此，即使不需要，也可以向上移动表单。

我也尝试使用Keyboard事件和Animated修复它，但是体验似乎很差-仅在打开键盘后才向上移动表单（我使用KeyboardWillShow事件，而不是Did ）。