Question

在React Native中，我在Text中包含View元素：

import React, { Component } from 'react';
import { Text, View, StyleSheet } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Buy this!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    width: 200,
    height: 200,
    backgroundColor: '#77EB11'
  },
  paragraph: {
    backgroundColor: '#F55008',
    textAlign: 'center',
    width: '100%',
    height: '100%'
  },
});

我希望文本水平和垂直居中。通常，这可以通过在包含justify-content中使用align-items和View来实现。但是，我正在使用Windows，因为this issue，我也有Text必须占用整个View的约束，否则我将无法点击整个View 1}}当我稍后将回调函数放入其中时。

我还创建了一个具有完全相同问题的React fiddle，但可能更容易使用。

目前，文本仅垂直居中。我怎样才能将它水平居中？

同样，最重要的限制是<Text>标记应占据所有包含<View>的内容。

Answer 1

您可以使用

display: table;
display: table-cell; vertical-align: middle;关于该段落。

WORKING DEMO

const styles = {
    container: {
      width: 200,
      height: 200,
      backgroundColor: '#77EB11',
      display: 'table'
    },
    paragraph: {
      backgroundColor: '#F55008',
      textAlign: 'center',
      width: '100%',
      height: '100%',
      display: 'table-cell',
      verticalAlign: 'middle'
    },
};

如果您想了解有关如何垂直对齐文字的其他策略，请尝试查看本文ALIGN TEXT VERTICALLY

在占据整个包含视图的同时垂直居中文本

1 个答案: