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

Question

所以我需要对齐一个按钮 它不在屏幕底部 按设计应该在屏幕中间但它应该对齐到所有设备的键盘顶部。

如果您查看此屏幕截图:

对于某些设备我设法做到了，但在其他一些设备上并没有真正对齐:

我怎样才能管理它以使其全部工作？

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

<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
  {...(Platform.OS === 'ios' ? { 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,
  },
});

确保按钮在 ScrollView 之外。

NOTE: You may need to adjust the offset prop of KeyboardAvoidingView if the keyboard has got autocomplete enabled.

Stick button at the bottom of the screen demo