使用显式高度时反应原生垂直文本对齐答案

【问题标题】：React Native vertical text alignment when using explicit height使用显式高度时反应原生垂直文本对齐
【发布时间】：2019-12-29 16:34:52
【问题描述】：

我想在具有明确高度的视图中将文本垂直居中。

Center text vertically in react-native 没有完全回答我的问题，因为他们没有使用明确的高度。

当我使用时

  <View style={styles.rightContainer}>

            <Text style={styles.label2}>
              Centered
            </Text>

        </View>

  rightContainer: {
    marginRight: 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
   label2: {
    height: 40,
    backgroundColor: 'green',
    textAlignVertical: 'center',
  },

如果我去掉显式高度，

  label2: {
    backgroundColor: 'green',
    textAlignVertical: 'center',
  },

它有效。

我需要设置显式高度，因为我会将此视图转换为可点击的按钮。

我该如何进行这项工作？我对 react-native 布局有什么误解？

【问题讨论】：

你不能用marginTop:height/2吗？

标签： css react-native flexbox react-native-flexbox

【解决方案1】：

这是因为“textAlignVertical”属性仅适用于 Android。检查文本上的documentation。

您可以添加一个额外的容器来包装文本：

export default class FlexDirectionBasics extends Component {
  render() {
    return (
      <View style={styles.rightContainer}>
        <View style={styles.labelContainer}>
          <Text style={styles.label}>Centered</Text>
        </View>
      </View>
    );
  }
}

const styles = {
  rightContainer: {
    marginRight: 10,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  labelContainer: {
    height: 40,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label2: {},
};

【讨论】：