React Native- прокручиваемый текст SVG

Question

Моя цель - иметь на экране прокручиваемый текст SVG, но я не могу понять, как.

Во-первых, прежде чем я попытался сделать текст прокручиваемым, я начал со следующего кода:

<View style={style}>
  <Svg height={height} width={width}>
    <G>
      {this.renderLegend({
        ...config,
        count: 4,
        data: data.datasets,
        paddingTop,
        paddingRight
      })}
    </G>
  </Svg>
</View>

А вот мой renderLegend функция:

   renderLegend = config => {
      var {
        count,
        data,
        labels = [],
        width,
        height,
        paddingRight,
        paddingTop,
        horizontalOffset = 0
      } = config;
      const fontSize = 12;
      //console.log(data);
      let middle = [...new Array(data.length)].map((_, i) => {
        return (
          <G key={Math.random()}>
            <Text
              key={Math.random()}
              x={
                ((width - paddingRight) / data.length) * i +
                paddingRight +
                horizontalOffset +
                60
              }
              y={paddingTop}
              fontSize={fontSize}
              fill={this.props.chartConfig.color(0.5)}
              textAnchor="middle"
            >
              {data[i].name}
            </Text>

            <Rect
              x={
                ((width - paddingRight) / data.length) * i +
                paddingRight +
                horizontalOffset
              }
              y={paddingTop - 5}
              rx="0"
              ry="0"
              width={4}
              height="4"
              strokeWidth={2}
              stroke={data[i].color ? data[i].color(0.5) : "white"}
              fill="white"
            />
          </G>
        );
      });

      return middle;
    };

Приведенный выше код работает нормально, он визуализирует текстовые элементы SVG по всей странице. Однако в некоторых случаях у меня может быть много текстовых элементов, поэтому в идеале я хочу сделать их прокручиваемыми.

Когда я пытаюсь обернуть renderLegend переменная содержимого в ScrollViewтекст исчезнет с экрана:

return (
  <View key={Math.random()}>
    <ScrollView horizontal={true}>
      <Svg key={Math.random()}>{middle}</Svg>
    </ScrollView>
  </View>
)

Есть ли причина его исчезновения, и есть ли способ отобразить прокручиваемую область с SVG-текстом?

Answer 1

Вы можете увидеть разницу между вашим первым и вторым кодом

Первый

<Svg height={height} width={width}>

второй

<Svg key={Math.random()}>{middle}</Svg>

Попробуйте указать фиксированную ширину и высоту, как в первом коде