自定义 Victory Scatter 的 dataComponent 以使用图标而不是 React Native 中的默认圆圈

Question

我想在 Victory Scatter 上显示图标，而不是 React Native 中的默认圆圈。我尝试使用下面的代码，但无论任何给定的 x 和 y 点如何，图标都放置在左上角。图标不是根据给定的 x 和 y 点放置的。需要帮助找到我的代码问题以修复错误。

下面是代码和屏幕截图。

import {Svg, Image} from 'react-native-svg'
class DataPoint extends React.Component {
  render() {
    const {x, y} = this.props
    return (
      <Svg x={x} y={y} width="20" height="20">
        <Image
          width="20"
          height="20"
          // eslint-disable-next-line max-len
          xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
        />
      </Svg>
    )
  }
}

 <VictoryScatter
        data={[
          {
            x: 100,
            y: 100
          }
        ]}
        dataComponent={<DataPoint />}
      />

Answer 1

这是一个演示：https://snack.expo.io/@nomi9995/victory-native

删除 Image 周围的 SVG 包装，这样它就可以正常工作了。

import React from "react";
import { StyleSheet, View } from "react-native";
import {
  VictoryChart,
  VictoryScatter,
} from "victory-native";
import {Image } from "react-native-svg";

class DataPoint extends React.Component {
  render() {
    console.log(this.props, "nominomithis.props");
    const { x, y } = this.props;
    return (
      <Image
        x={x}
        y={y}
        width="20"
        height="20"
        // eslint-disable-next-line max-len
        xlinkHref="https://s3.amazonaws.com/feedbackhouse-media-development/static/images/profie_image_placeholder/596e4f5df3be5b1ff99461c3"
      />
    );
  }
}

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <VictoryChart width={350}>
          <VictoryScatter
            data={[
              {
                x: 100,
                y: 100,
              }
            ]}
            dataComponent={<DataPoint />}
          />
        </VictoryChart>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});