代码之家 › 专栏 › 技术社区 › Emad Dehnavi

所有设备的键盘顶部的本机对齐按钮

react-native typescript

3

Emad Dehnavi · 技术社区 · 6 年前

所以我需要对齐一个按钮 Which is not at bottom om screen

如果您查看此屏幕截图:

我怎样才能让这一切顺利进行呢?

到目前为止我就是这么做的:

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

</Padding>

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

submitBtn: {
  margin: Spacing.base,
},

1 回复 | 直到 6 年前

1

12

Rajendran Nadar 6 年前

首先导入此包

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

确保按钮在scrollview之外。

KeyboardAvoidingView 如果键盘已启用自动完成功能。

Stick button at the bottom of the screen demo

2

0

chandra mohan 4 年前

 <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>