十一、Text记录

发表于 | 分类于
  1. 如何让文本右对齐？
    我知道的有两种办法：
    1
    2
    一种是设置父控件，让文本控件右对齐
    第二种是让文本控件填充满剩余空间，然后让文本控件的内容靠右

第二种办法比第一种更灵活。因为父控件设置子控件对齐方式往往没办法更改了，更改会影响其他子控件显示。我举个例子：

1
2
3
4
5
6
7
8
9
10
<TouchableOpacity style={{flex:1, flexDirection:'row', width: '100%', height: '10%', alignItems:'center', justifyContent: 'space-between'}}>
	<Text>软件升级</Text>
	<Text>版本号: 2.7.3</Text>
	<Image source={require('../res/ic_version.png')}>
</TouchableOpacity>
父控件指定了主轴对齐方式是： space-between， 这个没办法改。我想要让版本号的Text怎么靠右，靠近Image显示呢？

<Text style={{flex:1, textAlign:'right'}}>版本号: 2.7.3</Text>
首先我让版本号的Text控件填充满剩余空间： flex:1
然后我让Text控件里面的内容居右显示即达到了效果

  1. Text控件可以嵌套使用。有如下代码：
    1
    2
    3
    4
    <View style={{flexDirection:'row', marginTop:5}}>
    	<Text style={{color:'#000', fontSize:14}}>发起时间：</Text>
    	<Text style={{color:'#000', fontSize:14}}>{startTime}</Text>
    </View>

可以看到。两个Text是水平显示的。 可以使用更优雅布局方式：

1
2
3
4
<Text style={{color:'#000', fontSize:14, marginTop:5}}>
	发起时间：
	<Text>{startTime}</Text>
</Text>