React native 如何在React Native中对齐同一个组件中的两个组件

我创建了一个进度条，将其旋转90度，使其成为垂直条，然后我拍摄了一个电池图像，并尝试将进度条放置在电池内，但我无法使用相对位置将图像放置在电池内

但是当我使用位置作为绝对值时，图像会对齐，但我不能使用paddingTop或PaddingBottom

render() {
console.log("Progrss bar");
const barWidth = Dimensions.get("screen").width - 30;
const batteryWidth = Dimensions.get("screen").width;
const progressCustomStyles = {
  backgroundColor: "red",
  borderRadius: 0,
  borderColor: "orange"
};
return (
  <View style={styles.container}>
    <View style={styles.angle}>
      <View style={styles.progress}>
        <ProgressBarAnimated
          width={barWidth}
          value={this.state.progress}
          height={150}
          borderRadius={0}
          backgroundColor={
            this.state.progress > 20 && this.state.progress < 90
              ? "yellow"
              : this.state.progress >= 90
                ? "green"
                : "red"
          }
        />
      </View>
      <Image
        style={{
          width: batteryWidth,
          height: 150,
          position: "relative",
          zIndex: 1
        }}
        source={require("./assets/battery.png")}
      />
    </View>
  </View>
);

我得到的输出：

---

在图像内部完全对齐元素将是一件乏味的事情，因为应用于图像的任何布局属性都只符合图像的边界尺寸。由于图像看起来像两个矩形，因此可以尝试使用视图来绘制图像：

const styles = StyleSheet.create({
container: {
  flex: 1,
  justifyContent: "center",
  backgroundColor: "#FFFFFF"
},
angle: {
  transform: [{ rotate: "-90deg" }]
},
progress: {
  height: 100
}
});

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <View style={{ height: 20, width: 50, borderWidth: 5, borderBottomWidth: 0 }} />
        <View style={{ height: 200, width: 100, borderWidth: 5, justifyContent: 'flex-end' }}>
          <View style={{ height: 75, backgroundColor: 'green' }} />
        </View>
      </View>
    );
  }