行内元素实现

Question

我想创建 Text 个组件并将它们显示在一行中，例如 html 中的 span 个元素。如果我这样做：

<View>
  <Text> Start here, </Text> <Text> finish here </Text>
</View>

它们之间有断线，看起来像：

Start here,
finish here

如何防止换行并将它们显示在同一行？

Answer 1

只需设置正确的 flexDirection。默认为 column.

<View style={{flexDirection: 'row'}}>
 <Text> Start here, </Text> <Text> finish here </Text>
</View>

Answer 2

Text 组件在用另一个 Text 元素包裹时是内联的，例如：

<Text>
   <Text>We</Text><Text>Are</Text><Text>Inline</Text>
</Text>

Inline elements implementation