javascript - 动态更新 MapView.UrlTile 组件的 urlTemplate 属性

Question

我是 React 和 React Native 的新手。我正在使用 React Native Maps，并尝试每秒动态更新 MapView.UrlTile 组件的 urlTemplate 属性(最多达到一定限制)。

我尝试通过使用 setInterval() 更新状态变量来做到这一点。下面是我如何尝试执行此操作的示例。

class App extends React.Component {

    // initial state
    state = {
        url: ""
    };

    // call updateUrl 
    componentWillMount() {
        this.updateUrl();
    }

    // update the url every second 10 times
    updateUrl = () => {
        setInterval(() => {
            for (let i = 0; i < 10; i++) {
                this.setState({url: `https://example.com/${i}.png`});
            }
        });
    }

    // render the map
    render () {
        let url = this.state.url;

         return (
                <View style={styles.container}>
                    <MapView
                        style={styles.map}
                        region={region}
                        customMapStyle={mapStyle}
                    >
                        <MapView.UrlTile
                            urlTemplate={url}
                            maximumZ={19}
                            flipY={false}
                        />
                    </MapView>
                </View>
            );
    }

}

不幸的是，平铺图像似乎没有改变。我希望看到 map 上的图像每秒左右发生变化。如果我使用 Image 组件，并将 source 设置为 url 属性，则图像会按预期每秒更新一次。但是当使用 UrlTile 时， map 上的图像似乎没有更新。

上面是一个人为的例子。事实上，我正在开发一个天气雷达应用程序。当应用程序启动时，我会获得最近 10 次雷达扫描的时间戳数组，然后我可以使用它们为图 block 构建 urlTemplate。如果应用程序处于“循环”模式，我需要每秒(左右)显示一个不同的图 block 。我传入的实际 URL 是有效的(我可以在浏览器中显示图像，或将它们加载到 Image 组件中)。但 map 中的 UrlTile 组件似乎没有更新。

有什么建议或想法我可能会出错吗？

Answer 1

我可以通过在 setInterval 之前设置 this.state.url 的值来解决这个问题。例如，如果使用上面的示例代码:

updateUrl = () => {
    this.setState({url: `https://example.com/0.png`});
    setInterval(() => {
        for (let i = 0; i < 10; i++) {
            this.setState({url: `https://example.com/${i}.png`});
        }
    });
}