React Native中alignItems: 'center'对TextInput不生效问题求助

问题描述 #

将TextInput与按钮置于同一flex-direction: row的View容器内，设置alignItems: 'center'后，TextInput未实现垂直居中，当前效果与期望效果如下：

当前渲染效果：

期望渲染效果：

当前容器样式代码：

textInputAndButtonContainer: {
    backgroundColor: 'white',
    display: 'flex',
    flexDirection: 'row',
    borderColor: 'black',
    borderWidth: 2,
    borderRadius: 11,
    alignItems: 'center',
},

解决方案 #

1. 给TextInput添加内部垂直对齐属性 #

React Native的TextInput组件内部文本默认未垂直居中，需显式设置内部对齐：

textInputStyle: {
    flex: 1,
    contentVerticalAlign: 'center',
}

2. 移除TextInput默认内边距（针对iOS） #

iOS平台的TextInput自带默认上下内边距，会撑开组件高度导致对齐失效，可直接移除：

textInputStyle: {
    flex: 1,
    contentVerticalAlign: 'center',
    paddingVertical: 0,
}

3. 重置TextInput最小高度（针对Android） #

Android平台的TextInput有默认最小高度限制，可重置为自适应容器高度：

textInputStyle: {
    flex: 1,
    contentVerticalAlign: 'center',
    paddingVertical: 0,
    minHeight: 'auto',
}

说明 #

核心问题是TextInput自身的默认样式或内部对齐规则，抵消了容器alignItems: 'center'的作用。通过调整TextInput的内部对齐、移除默认内边距或重置最小高度，即可实现与按钮的垂直居中对齐。

内容的提问来源于stack exchange，提问作者owdji