RN 获取组件的宽度和高度

最新推荐文章于 2022-04-01 13:02:42 发布

weixin_34054931

最新推荐文章于 2022-04-01 13:02:42 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/gemeiyi/p/9854745.html

版权

https://www.cnblogs.com/zhiyingzhou/p/7471212.html

https://blog.csdn.net/calvin_zhou/article/details/78415524

通过获取灰色 bar 的宽度，算橙色 bar 的宽度（右边数字其实应该是 3/4）

import React, { Component } from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default class JinDuTiao extends Component {

    constructor(props) {
        super(props);
        this.state = {}
    }

　　
　　//获取底层灰色bar的宽度
    _onLayout(event) {
        let { width } = event.nativeEvent.layout;
        this.setState({
            barWidth: width
        })
    }

    render() {
        return (

            <View style={styles.barBox}>
                <View style={{ flex: 4 }}>
                    <View>
                        <View style={styles.bar} onLayout={(e) => { this._onLayout(e) }} />
                        <View style={[styles.bar, {
                            backgroundColor: "#f8b62b",
                            position: "absolute",
                            width: this.state.barWidth * (3 / 4)
                        }]} />
                    </View>
                </View>
                <View style={{ flex: 1 }}>
                    <View style={styles.classTimeBox}>
                        <Text>3/4</Text>
                    </View>
                </View>
            </View>

        )
    }
}

const styles = StyleSheet.create({

    classTimeBox: {
        flexDirection: "row",
        alignSelf: 'flex-end',
        alignItems: 'flex-end'
    },
    barBox: {
        marginTop: 9,
        flexDirection: "row",
        alignItems: 'center',
    },
    bar: {
        paddingRight: 10,
        height: 6,
        borderRadius: 3,
        backgroundColor: '#eeeeee',
        zIndex: 1,
    },
});