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

Question

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

在 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 布局有什么误解？

Answer 1

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

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

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: {},
};