3. 如果改变了text的高度，怎么让里面的文字垂直居中？

如果改变了text的高度，怎么让里面的文字垂直居中？

  • J

    如题，如果一个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,
    }
    });

    0
  • T

    RN使用flexbox布局，你的前几种布局属性思路还是基于css+div，不适用。

    0
  • V

    使用 方法四 ，是兼容的，否则 ios 和 android 可能展示不一致。

    0