所有设备的键盘顶部的 React Native Align 按钮 [英] React Native Align button on top of keyboard for all devices

问题描述

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

So I need to align a button Which is not at bottom om screen by design should be at middle of screen but it should align to be on top of the keyboard for all devices.

如果您查看此屏幕截图:

If you check this screenshot :

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

for Some devices I mange to do it, but in some others is not really aligned :

我如何才能做到这一点?

how can I manage this to work in all?

这是我目前所做的:

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

</Padding>

而且 isKeyboardOpen 只是一种方法，它会根据平台创建一个监听器，如果键盘打开，则返回 true:

And isKeyboardOpen is just a method which will create a listner based on the platform return true if keyboard is open :

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

而 submitBrn css 类是:

And submitBrn css class is :

submitBtn: {
  margin: Spacing.base,
},

推荐答案

先导入这个包

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,
  },
});

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

Make sure the button is outside the scrollview.

注意:如果键盘启用了自动完成，您可能需要调整 KeyboardAvoidingView 的偏移属性.

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

屏幕演示底部的按钮

这篇关于所有设备的键盘顶部的 React Native Align 按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！