所有设备键盘顶部的React Native Align按钮

Question

因此，我需要Which is not at bottom om screen按设计将按钮对准屏幕的中间，但对于所有设备，它应对准键盘的顶部。

如果您查看此屏幕截图：

对于某些设备，我会竭力做到这一点，但在某些其他设备中，并没有真正做到：

我该如何管理所有这些？

这是我到目前为止所做的：

<Padding paddingVertical={isKeyboardOpen ? Spacing.unit : Spacing.small}>
<Button
      variant="solid"
      label='Next'
      style={styles.submitBtn}
    />

</Padding>

isKeyboardOpen只是一种方法，它将基于平台（如果键盘打开）返回true来创建列表器：

 Keyboard.addListener(
  Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow',
  true 
 );

并且submitBrn css类是：

submitBtn: {
  margin: Spacing.base,
},

Answer 1

首先导入这个包

import {
  Button,
  ScrollView,
  KeyboardAvoidingView,
  TextInput,
} from 'react-native';

渲染方法

<KeyboardAvoidingView
  behavior={'padding'}
  style={styles.container}>
  <ScrollView style={styles.scrollView}>
    <TextInput style={styles.input} placeholder="Tap here" />
  </ScrollView>
  <Button title="Next" />
</KeyboardAvoidingView>

这是款式

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  scrollView: {
    paddingHorizontal: 20,
  },
  input: {
    marginBottom: 20,
    borderBottomWidth: 2,
    borderColor: '#dbdbdb',
    padding: 10,
  },
});

确保按钮在滚动视图之外。

注：KeyboardAvoidingView如果键盘已启用自动完成功能，则可能需要调整偏移道具。

屏幕演示底部的“固定”按钮