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的偏移量。

Stick button at the bottom of the screen demo

Answer 2

你可以使用 react native modal

 <KeyboardAvoidingView
    keyboardVerticalOffset={Platform.OS == "ios" ? 10 : 0}
    behavior={Platform.OS == "ios" ? "padding" : "height"} style={{ flex: 1         }} >
    <Modal>

       <ScrollView>  
      <Content><-------Your content------></Content>
       </ScrollView>  

      <BottomButton   />
    </Modal>
  </KeyboardAvoidingView>

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

2 个答案: