0

我的目标是在屏幕上显示可滚动的 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 文本元素。但是，在某些情况下，我可能有很多文本元素，所以理想情况下我想让它可滚动。

当我尝试将renderLegendcontent 变量包装在 aScrollView中时，文本会从屏幕上消失：

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

它消失有什么原因吗？有没有办法用 SVG 文本显示到可滚动区域？

4

1 回答 1

0

你可以看到你的第一个和第二个代码之间的区别

第一的

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

第二

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

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

于 2019-01-17T10:50:02.093 回答