React Native中的Text组件

刚开始学习RN，把学习过程中遇到的一些问题稍作记录。

---

Text组件其实就是一个负责文本显示的标签。
使用方法为<Text>Text Content</Text>。既然是标签，自然也能嵌套，能设置样式。

<Text style={{fontSize:20}}>//所有子Text都将拥有fontSize:20
  <Text style={{textAlign:'center'}}>Text Content</Text>
  <Text style={{color:'red'}}>Line 2</Text>
</Text>

但是，在使用过程中发现了几个不同寻常的特性。(基于0.46版本，不确定算不算bug，后期会不会修复)

1、默认背景色

默认背景色为透明色，这个没什么问题。可是Text默认的透明背景色和View等组件又略有不同。如

<View style={{height:100, width:100, backgroundColor:'orange', borderRadius:5}}>
  <Text style={{flex:1}}>Text Content</Text>
</View>

我们会发现，视图显示的背景色仍然是View本身的orange，但是View的圆角幅度丢失了。同样的例子如果把Text换成View组件则不会。
但是如果我们显式声明Text的背景颜色为透明

<View style={{height:100, width:100, backgroundColor:'orange', borderRadius:5}}>
  <Text style={{flex:1,backgroundColor:'transparent'}}>Text Content</Text>
</View>

View的圆角幅度又出现了。

2、设置对齐方式

<Text style={{textAlign:'center'}}>Text Content</Text>

在这个例子中，文本水平居中显示，这没什么问题。可是如果想让文本垂直居中，就不行了。我试过一些样式，比如

<Text style={{textAlign:'center',justifyContent:'center'}}>Text Content</Text>

等等均无法使文本居中显示，最后搜索引擎得出解决方案为在Text外，再包一层View。像这样：

<View style={{alignItems:'center', justifyContent:'center',flex:1}}>
  <Text>Text Content</Text>
</View>

这样不但实现了垂直居中的效果，而且连背景颜色的问题也顺带解决了。因为前面说过，使用View组件不会有问题。

综上两点，建议在使用Text的时候都配合View来使用。其中Text组件负责且仅负责文本的显示，包括文本内容，字体，字号，颜色等；View组件Text的布局，背景，对齐方式等其他内容。