React Native'deki SVG'de konumlandırma simgesi

Question

Arka plan: Bu öğreticinin ardından react-native-svg grafiğine bir araç ipucu eklemeye çalışıyorum. Eğiticiye bağlantı: Bağlantı

Mevcut Kod Uygulaması:

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

Soru: Araç ipucu metninin yanına yukarıdaki resimde görüldüğü gibi simgeyi (Koşu simgesi) eklemek istiyorum. Simge, ardından dikdörtgenin içindeki metin Siyahla doldurulur. Onu konumlandırmaya çalıştığımda, bir nedenden ötürü aşırı sol üstte görünüyor. Nasıl konumlandırırım?

Answer 1

Sen kullanabilirsiniz ForeignObjecttepki yerli-svg gelen bileşeni ve keşfetmenize değiştirmek decoratorgibi bir URL'ye:

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

Daha önce sahip olduğunuz şeyle ilgili sorun, react-native-svg Textve Rectbileşenlerinin kullanması xve ykoordine etmesi ve simgenizin olmamasıdır, bu nedenle konumlandırma kapalı olacaktır.

Yukarıda gösterilen yaklaşımın avantajı sadece belirtmek zorunda olmasıdır xve ybir sahne ForeignObject. İçindeki her şey ForeignObject, normalde yaptığınız gibi konumlandırılmış normal görünümler olabilir (https://github.com/react-native-community/react-native-svg#foreignobject).

Sırasıyla tooltipPos.xve tooltipPos.yiçin xve yprop değerlerini seçtim ForeignObject, ancak gerekirse bir ofset ekleyebilirsiniz.

---

ForeignObjectReact-native-svg'den içe aktardığınızdan emin olun .