更新坐标数组时多条折线不呈现

Question

我正在尝试制作多色多段线。我之前已经能够使用 Vue.js 成功地做到这一点，但现在我们将它添加到 React 原生应用程序中，但它在 React js 中没有像我预期的那样工作。

我正在制作多条折线，每条线（线段）都有多个点。我有这样的结构：

组：[{键：'BLUE'，坐标：[]}，键：'GREEN'，坐标：[]]；

现在每个键代表一种颜色，坐标是一个坐标数组。现在，当我像这样循环时：

{
    this.state.groups.map((group, index) => {

        return (
            <Polyline
                key={index}
                coordinates={group.Points}
                strokeColor={
                    group.Key === "GREEN" ? "#0F0" : "#000"
                    // "#000"
                    // group.Key === "G"
                } // fallback for when `strokeColors` is not supported by the map-provider
                strokeColors={[
                    '#7F0000',
                    '#00000000', // no color, creates a "long" gradient between the previous and next coordinate
                    '#B24112',
                    '#E5845C',
                    '#238C23',
                    '#7F0000'
                ]}
                strokeWidth={6}
            />
        );

    })
}

问题是它有效！完美，但它没有绘制正在更新的最后一条多段线。例如，这条多段线有 10 段。现在在绘制了 3 个并且循环位于第 4 段之后，它以 30 毫秒的延迟推送最后一组中的每个坐标。我添加了延迟以显示动画。现在它不会在地图上绘制，直到第 4 段的所有坐标都被推送。完成后，第 5 段开始，第 4 段显示完美，但现在第 5 段停止工作。

我知道点被完美地添加了，因为我也添加了一个相机并且我将它的中心更改为最后一个被推入 groups/segments 的点。

Group/Segments循环：

addPoint(group, point) {

        var data = this.state.data;

        if (group <= (data.length - 1)) {

            var g = data[group];

            // console.log('g', g);

            if (point <= (g.Item2.length - 1)) {

                var p = g.Item2[point];

                var {groups} = this.state;

                // console.log('groups,', groups);

                groups[group].Points = groups[group].Points.concat({
                    longitude: p.longitude,
                    latitude: p.latitude,
                });

                this.MapView.animateCamera({
                    center: {
                        latitude: p.latitude,
                        longitude: p.longitude,
                    },
                    duration: 100,
                    zoom: 15,
                });

                point++;

                setTimeout(() => {

                    this.addPoint(group, point);

                }, 300);

            } else {

                point = 0;
                group++;

                if (group < this.state.data.length - 1) {

                    var key = this.state.data[group].Item1;

                    console.log('key', key);

                    var groups = this.state.groups.concat({
                        Key: key,
                        Points: [],
                    });

                    this.setState({
                        groups: groups,
                    })

                }

                setTimeout(() => {

                    this.addPoint(group, point);

                }, 300);

            }

        } else {

            console.log('last group reached');

        }

    }

有解决办法吗？

Answer 1

我明白了。问题是每当我更新任何折线的坐标数组时，它都必须重新渲染整个东西，这是性能明智的非常糟糕的决定。

我通过制作一个维护自己的坐标数组的自定义折线组件解决了这个问题。实现了一个内部超时函数，该函数以递增方式推送坐标。这解决了问题，现在超级容易使用。

您可以在此处阅读更多相关信息：multi colored gradient polyline using google maps on react native

更新坐标数组时多条折线不呈现

Multiple Polylines not rendering when cordinates array is updated

react-native

react-native-maps