Positionierungssymbol in SVG in React Native

Question

Hintergrund: Ich versuche, nach diesem Tutorial einen Tooltip zu einem React-Native-SVG-Diagramm hinzuzufügen. Der Link zum Tutorial: Link

Aktuelle Code-Implementierung:

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

Frage: Ich möchte das Symbol (Laufsymbol) wie im obigen Bild neben dem QuickInfo-Text hinzufügen. Das Symbol und dann der Text innerhalb des Rechtecks ​​werden in Schwarz ausgefüllt. Wenn ich versuche, es zu positionieren, wird es aus irgendeinem Grund ganz oben links angezeigt. Wie positioniere ich es?

Answer 1

Sie können die ForeignObjectKomponente von react-native-svg verwenden und Ihre decoratorin etwa folgende ändern :

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

Das Problem mit dem, was Sie zuvor hatten, ist, dass das React-Native-SVG Textund die RectKomponenten verwenden xund ykoordinieren und Ihr Symbol dies nicht tut, sodass die Positionierung deaktiviert ist.

Der Vorteil des oben gezeigten Ansatzes besteht darin, dass Sie nur die xund yRequisiten des angeben müssen ForeignObject. Alles im Inneren ForeignObjectkann eine normale Ansicht sein, die wie gewohnt positioniert ist (https://github.com/react-native-community/react-native-svg#foreignobject).

Ich habe die Werte für tooltipPos.xund tooltipPos.yfür xund yprop ausgewählt ForeignObject, aber Sie können bei Bedarf einen Versatz hinzufügen.

---

Stellen Sie sicher, dass Sie ForeignObjectaus react-native-svg importieren .