Question

我的文字显示内联，我不想要它。

为什么此代码会使其显示为内联？

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'row',
  backgroundColor: 'green'
}}>
  <CardItem style={{


    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'red',

    alignItems: 'center'
  }}>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%',
      backgroundColor: 'green',
      flexDirection: 'row',
    }}>
      {this.selectedProduct.name}
    </Text>
    <Text style={{
      color: '#FFFFFF',
      marginBottom: 15,
      backgroundColor: 'blue',
      width: '100%'
    }}>
      {this.selectedProduct.description}
    </Text>
    <Text style={{
      backgroundColor: 'yellow',
      color: '#FFFFFF',
      marginBottom: 15,
      width: '100%'
    }}>
      price: {this.selectedProduct.price ? this.selectedProduct.price + ' of your local currency' : 'not entered'}
    </Text>
  </CardItem>
</Card>

Answer 1

你的意思是“在一条线上”？由于在那里使用flex - 它将所有子元素视为弹性项（也是纯文本），并相应地在一行中分配它们。您可以将flexDirection更改为“列”，将文本置于之上。

Answer 2

由于您使用的是flexDirection: 'row'，如果您想将其显示在列中，请使用flexDirection: 'column'，如下所示：

<Card style={{

  marginBottom: 10,
  flex: 1,
  flexDirection: 'column',
  backgroundColor: 'green'
}}>

停止显示内联文本

2 个答案: