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>

尝试像第一个代码一样指定固定的宽度和高度

反应本机可滚动SVG文本

1 个答案: