React-Native中的Text

最新推荐文章于 2021-05-17 22:12:10 发布

一路斜阳

最新推荐文章于 2021-05-17 22:12:10 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： react-native 文章标签： Text-RN

本文链接：https://blog.youkuaiyun.com/zhaoruda/article/details/73521964

react-native 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了React Native中Text组件的特点及布局方式，强调了Text组件不使用flexbox布局，而是采用文本布局的方式，并解释了如何通过包装View来解决Text组件间的间距问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　我们知道Text组件主要用来显示文本的，但是需要注意但是Text元素在布局上不同于其它组件：在Text内部的元素不再使用flexbox布局，而是采用文本布局。这意味着内部的元素不再是一个个矩形，而可能会在行末进行折叠。
　　而且，在Text元素上使用margin和padding是不会生效的。
　　如下代码，如果想使得内部的两个Text之间有点间隔，依赖margin和padding是无法实现的。这时候就需要将Text包在View中了。

  <Text style={styles.baseText}>
      <Text style={styles.titleText}>
        {this.state.titleText}
      </Text>
      <Text>
        {this.state.bodyText}
      </Text>
    </Text>