如何将页面中的TextInput置于react-native中？

Question

当TextInput聚焦和Android键盘打开时，需要在键盘上方的屏幕上居中TextInput。你好吗？

Answer 1

由于某种原因，justifyContent不适用于TextInput，所以只需使用边距。这是一个例子：

var styles = StyleSheet.create({
  textInput: {
    marginLeft: 50,
    marginRight: 50
  }
});

只需确保将样式设置为TextInput：

<TextInput style={styles.textInput} />

几乎忘了 - 不要设置宽度，使用边距来定义尺寸，或者它不会工作。

Answer 2

您需要使用flexbox。

在父容器上，您需要以下内容：

var styles = StyleSheet.create({
    contaner: {
      display: 'flex',
      flexDirection: 'row',
      justifyContent: 'center
    }
});

以下是flexbox的一个很好的指南：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

我知道这是一个老问题，但我遇到了同样的问题，并找到了解决方案，所以我想我会分享给其他有此问题的人。

我有一个带样式的容器：

flex:1,
justifyContent: 'center',
alignItems: 'center'

在该容器中，我有几个Text元素，以及Slider和TextInput。除了TextInput之外，一切都正确居中。为了解决这个问题，我在TextInput的样式中添加了以下内容：

alignSelf: 'center'

现在TextInput正好在屏幕上居中。