react-native - 自定义 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",
  },
});