Reactjs 在React Native中定位SVG中的图标

背景： 在本教程之后，我尝试向react原生svg图表添加工具提示。 指向教程的链接：

当前代码实现：

import React, {useState} from 'react';
import {View, Text, Dimensions} from 'react-native';
import {LineChart} from 'react-native-chart-kit';
import {Rect, Text as TextSVG, Svg} from 'react-native-svg';

const Charts = () => {
  let [tooltipPos, setTooltipPos] = useState({
    x: 0,
    y: 0,
    visible: false,
    value: 0,
  });

  return (
    <View>
      <LineChart
        data={{
          labels: ['January', 'February', 'March', 'April', 'May', 'June'],
          datasets: [
            {
              data: [100, 110, 90, 130, 80, 103],
            },
          ],
        }}
        width={Dimensions.get('window').width}
        height={250}
        yAxisLabel="$"
        yAxisSuffix="k"
        yAxisInterval={1}
        chartConfig={{
          backgroundColor: 'white',
          backgroundGradientFrom: '#fbfbfb',
          backgroundGradientTo: '#fbfbfb',
          decimalPlaces: 2,
          color: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          labelColor: (opacity = 1) => `rgba(0, 0, 0, ${opacity})`,
          style: {
            borderRadius: 0,
          },
          propsForDots: {
            r: '6',
            strokeWidth: '0',
            stroke: '#fbfbfb',
          },
        }}
        bezier
        style={{
          marginVertical: 8,
          borderRadius: 6,
        }}
        decorator={() => {
          return tooltipPos.visible ? (
            <View>
              <Svg>
                <Rect
                  x={tooltipPos.x - 15}
                  y={tooltipPos.y + 10}
                  width="40"
                  height="30"
                  fill="black"
                />
                <MaterialCommunityIcons
                  name="run"
                  size={32}
                  color="rgb(67, 67, 67)"
                />
                <TextSVG
                  x={tooltipPos.x + 5}
                  y={tooltipPos.y + 30}
                  fill="white"
                  fontSize="16"
                  fontWeight="bold"
                  textAnchor="middle">
                  {tooltipPos.value}
                </TextSVG>
              </Svg>
            </View>
          ) : null;
        }}
        onDataPointClick={(data) => {
          let isSamePoint = tooltipPos.x === data.x && tooltipPos.y === data.y;

          isSamePoint
            ? setTooltipPos((previousState) => {
                return {
                  ...previousState,
                  value: data.value,
                  visible: !previousState.visible,
                };
              })
            : setTooltipPos({
                x: data.x,
                value: data.value,
                y: data.y,
                visible: true,
              });
        }}
      />
    </View>
  );
};

import React，{useState}来自“React”；
从“react native”导入{View，Text，Dimensions}；
从“react native chart kit”导入{LineChart}；
从'react native Svg'导入{Rect，Text as textssvg，Svg}；
常量图表=（）=>{
让[tooltipPos，setTooltipPos]=useState({
x:0,，
y:0，
可见：假，
值：0，
});
返回(
`rgba（0,0,0，${opacity}）`，
labelColor：（不透明度=1）=>`rgba（0,0,0，${opacity}）`，
风格：{
边界半径：0，
},
道具：{
r:'6'，
冲程宽度：“0”，
笔划：“#fbfb”，
},
}}
贝塞尔
风格={{
Margin:8，
边界半径：6，
}}
装饰器={（）=>{
返回tooltipPos.visible(
{tooltipPos.value}
)：null；
}}
onDataPointClick={（数据）=>{
让isSamePoint=tooltipPos.x==data.x&&tooltipPos.y==data.y；
isSamePoint
？setTooltipPos（（以前的状态）=>{
返回{
…以前的状态，
value:data.value，
可见：！previousState.visible，
};
})
：setTooltipPos({
x:data.x，
value:data.value，
y：数据，y，
可见：对，
});
}}
/>
);
};

问题: 我想添加图标（运行图标），如上图所示，位于工具提示文本旁边。

---

图标，然后矩形内的文本填充为黑色。当我试图定位它时，由于某种原因，它显示在最左上方。如何定位它？

您可以使用react native svg中的

ForeignObject

组件，并将您的

装饰器更改为类似以下内容：

decorator={() => {
  return tooltipPos.visible ? (
    <ForeignObject x={tooltipPos.x} y={tooltipPos.y}>
      <View
        style={{
          width: 70,
          flexDirection: 'row',
          backgroundColor: 'black',
        }}>
        <MaterialCommunityIcons
          name="run"
          size={32}
          color="rgb(67, 67, 67)"
        />
        <Text
          style={{
            color: 'white',
            fontSize: 16,
            fontWeight: 'bold',
            textAnchor: 'middle',
          }}>
          {tooltipPos.value}
        </Text>
      </View>
    </ForeignObject>
  ) : null;
}}

decorator={（）=>{
返回tooltipPos.visible(
{tooltipPos.value}
)：null；
}}

您以前遇到的问题是，react原生svg
Text
和
Rect
组件使用
x
和
y
坐标，而您的图标没有，因此定位将关闭

上述方法的好处在于，您只需指定
ForeignObject
的
x
和
y
道具。
ForeignObject
中的所有内容都可以是常规视图，位置与您通常所处的位置相同（）

我已经分别为
x
和
y
选择了
tooltipPos.x
和
tooltipPos.y
作为
ForeignObject
的
prop值，但您可以根据需要添加偏移量


确保从react native svg导入
ForeignObject
。
在测试这一点时，单击某个点时工具提示会引发错误。发送一份回购协议或者一些样本代码？嘿，谢谢你抽出时间。这里有一个快捷链接，它可以工作：PS：工具提示不会在点击浏览器时显示，如果你在你的设备上运行它，它可以工作。非常感谢你，我会试试这个。同时，你认为有可能根据这个值给这个图表增加一个梯度吗？有关详细信息，请参阅此链接：[link]（）