如果改变了text的高度,怎么让里面的文字垂直居中?
-
如题,如果一个text的高度被动态改变了,他里面的文字不会自动垂直居中,针对这个问题google了一些,主要有一下方式可以达到垂直居中:
1.通过设置lineHeight方式,自己验证无效?
2.设置paddingTop方式,验证无效,原因不清楚?
3.查看官方文档,android上面有textAlignVertical属性,但是设置后仍然无效,坑?
4.通过在text外层包裹view,利用flex布局实现,目前就这种方式可行。
我的问题是难道前面三种都不行?还是我哪里设置有误,不懂?我的代码如下:
class RNIntegrations extends React.Component{// 构造 constructor(props) { super(props); // 初始状态 this.state = {w:80,h:20}; } _startAnim(){ let count=0; while(count++<100){ //利用requestAnimationFrame执行动画,效率低下,效果生硬 requestAnimationFrame(()=>this.setState({w:this.state.w+1,h:this.state.h+1})); } } render(){ return ( <View style={styles.container}> <Text style={[styles.text,{width:this.state.w,height:this.state.h}]}> 动画view </Text> <TouchableOpacity onPress={this._startAnim.bind(this)}> <View style={styles.btnWrap}> <Text style={styles.btn}>执行动画</Text> </View> </TouchableOpacity> </View> ); }
}
const styles=StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
},
text:{
fontSize:15,
fontFamily:'monospace',
textAlign:'center',
backgroundColor:'green',
textAlignVertical:'center',
},
btnWrap:{
borderWidth:1,
backgroundColor:'gray',
alignItems:'center',
},
btn:{
color:'white',
fontSize:15,
}
});
-
RN使用flexbox布局,你的前几种布局属性思路还是基于css+div,不适用。
-
使用 方法四 ,是兼容的,否则 ios 和 android 可能展示不一致。