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

debugcn 发表于 Dev

尼迪·库马尔

我创建了一个进度条，其中我将它旋转到 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
}
});

我得到的输出：

自卫队

在图像内部完美对齐元素会很乏味，因为应用于图像的任何布局属性都只会符合图像的边界尺寸。由于您的图像看起来像两个矩形，您可以尝试使用Views 来绘制它。示例：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。