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,
},
});