如何在React Native中将两个组件对齐

Question

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

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

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

使用的样式：

[Environment]::SetEnvironmentVariable("BUILD_FAILED", "1", "Machine")

我得到的输出：

Answer 1

将元素完全对齐到图像内部将很繁琐，因为应用于图像的任何布局属性都只会符合图像的边界尺寸。由于您的图片看起来像两个矩形，因此您可以尝试使用View来绘制它。 Example：

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