如果改变了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 可能展示不一致。