Question

我正在努力在React Native中对齐SVG。

到目前为止，我有以下内容，但SVG在组件的左上角呈现。我一直在争夺这个一两个小时。

const Like = () => (
  <View
    style={{
      height: 45,
      width: 45,
      flex: 1,
      borderWidth: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Svg width={45} height={45} viewBox="0 0 25 25">
      <Path
        d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
        fill="#f26aa3"
      />
    </Svg>
  </View>
);

Answer 1

您可以直接导入图像文件。示例：

import Image from '../assets/image.svg';

图像包装器的样式是

const styles = StyleSheet.create({
  image: {
      alignItems: 'center',
      justifyContent: 'center,
  },
});

作为回报，

<View style={styles.image}>
  <Image width={100} height={100} />
</View>

Answer 2

Path组件没有可调整的x和y坐标属性，因此您不能仅提供这些属性来使其居中。相反，我们可以做的是创建一个包含您的Path组件的定义。在Defs标签内声明的项目在“使用”之前是不可见的。然后，我们可以利用Use组件来使用已定义的组件，并提供x和y坐标作为像素值或百分比。

因此，在您的上下文中，您最终会得到以下内容：

import { Svg, Path, Defs, Use } from "react-native-svg";

const Like = () => (
  <View
    style={{
      height: 45,
      width: 45,
      flex: 1,
      borderWidth: 1,
      justifyContent: 'center',
      alignItems: 'center',
    }}>
    <Svg width={45} height={45} viewBox="0 0 25 25">
      <Use href="likeButton" x="50%" y="50%" />

      <Defs>
        <Path
          id="likeIcon"
          d="M5.5 11a.344.344 0 0 1-.28-.126l-3.823-4.32c-.016 0-.041-.02-.078-.062-.033-.042-.067-.08-.095-.113L.88 5.902c-.143-.2-.28-.435-.407-.704a4.44 4.44 0 0 1-.323-.853C.05 4.01 0 3.675 0 3.34 0 2.303.256 1.482.774.88 1.273.293 1.997 0 2.944 0c.243 0 .5.05.771.15.274.1.517.235.732.403.2.15.393.318.58.502.17.15.328.31.473.477.142-.167.3-.327.47-.477.187-.184.381-.352.583-.502.215-.168.458-.302.73-.402.271-.1.53-.151.773-.151.944 0 1.669.293 2.17.879.515.603.774 1.424.774 2.461 0 1.038-.466 2.118-1.397 3.24l-3.824 4.294A.351.351 0 0 1 5.5 11"
          fill="#f26aa3"
        />
      </Defs>
    </Svg>
  </View>
);

如何在React Native中居中SVG？

2 个答案: