Как выровнять оба компонента в одном и том же в React Native

Question

Я создал индикатор выполнения, в котором я повернул его на 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
}
});

Вывод, который я получил:

Answer 1

Будет очень утомительно выравнивать элемент внутри изображения, потому что любые свойства макета, примененные к изображению, будут соответствовать только ограничивающим размерам изображения. Поскольку ваше изображение выглядит как два прямоугольника, вы можете попробовать нарисовать его с помощью View s. Пример :

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