css - 使用显式高度时 react native 垂直文本对齐

Question

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

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',
  },

它有效。

我需要设置明确的高度，因为我会将此 View 转换为可点击的按钮。

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

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