Question

我有一些这样的文本段落：

ruamel.yaml.parser.ParserError: while parsing a block mapping
  in "<unicode string>", line 26, column 4:
       default: csv
       ^ (line: 26)
expected <block end>, but found '<block mapping start>'
  in "<unicode string>", line 35, column 5:
        vars_map:
        ^ (line: 35)

显示如下：

<Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{textAlign:"center"}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

我希望它显示为：

11112222333344445555

其中3333是textAlign Center

我该怎么做？

我试图设置flexDirection，但是没有用。

数据结构有点复杂，例如

11112222
       3333
44445555

因为视图组件不能嵌套在文本组件中，所以我无法将3333包裹的文本更改为视图。

Answer 1

使用View组件作为容器，然后将要内联的项目包装在Text组件中。 example here

编辑1：

结构示例：

<View>
  <text>
    <Text>1111</Text>
    <Text>2222</Text>
  </text>
  <Text style={{textAlign:"center"}}>
    <Text>3333</Text>
  </Text>
  <text>
    <Text>4444</Text>
    <Text>5555</Text>
  </text>
</View>

working example here

Answer 2

尝试一下。

<Text>
    <Text>1111</Text>
    <Text>2222</Text>
    <Text style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
        <Text>3333</Text>
    </Text>
    <Text>4444</Text>
    <Text>5555</Text>
</Text>

Answer 3

您可以使用我在这里提到的View。

  <View style={{alignItems:'flex-start'}}>
    <Text>111111</Text>
  </View>
  <View style={{alignItems:'center'}}>
  <Text>2222222</Text>
  </View>
  <View style={{alignItems:'flex-start'}}>
  <Text>333333</Text>
  </View>

Answer 4

这对我有用

<View style={{ width: '100%', flexDirection: 'column' }}>
    <Text style={{ width: '100%' }}>1111</Text>
    <Text style={{ width: '100%' }}>2222</Text>
    <Text style={{ textAlign: "center", width: '100%' }}>
        <Text>3333</Text>
    </Text>
    <Text style={{ width: '100%' }}>4444</Text>
    <Text style={{ width: '100%' }}>5555</Text>
</View>

如何使文字在段落中居中

4 个答案: