React Native 地图重新渲染答案

【问题标题】：React Native maps re-renderReact Native 地图重新渲染
【发布时间】：2022-08-12 12:16:10
【问题描述】：

我有一个使用 useEffect() 动画的进度条（react-native-elements）。该组件具有 MapView(react-native-maps) 并且在每个刻度上都会重新渲染，因此我无法移动地图。

我怎样才能在不重新渲染地图的情况下仍然拥有那个进度条？

家

const Home = ({ navigation }) => {

...some code above...

useEffect(() => {
        //setProgressValue(0);
        var timer;
        if (progressValue != 0) {
            timer = setInterval(() => {
                if (progressValue <= 1) {
                    setProgressValue(progressValue + 0.040);
                }
                else {
                    setProgressValue(0);
                    setTimeOver(true);
                }
            }, 1000);

            return () => {
                clearInterval(timer);
            }
        }
    }, [progressValue]);

... code below ...

return (
...
<MainMap notification={notification} />
...
)

MainMap 组件

<View style={StyleSheet.absoluteFillObject}>
            <MapView
                ref={mapRef}
                provider={PROVIDER_GOOGLE}
                region={geo.location}
                style={[StyleSheet.absoluteFillObject]}
                loadingEnabled={true}
                minZoomLevel={16}
                maxZoomLevel={20}
            >
                {/* Current users location */}
                {geo.location &&
                    <Marker identifier={\'me\'} pinColor={\"red\"} key={(Date.now()-1).toString()} title={\"Это я\"} coordinate={geo.location} />
                }
                
                {/* Location where help is needed */}
                {notification &&
                    <Marker identifier={\'target\'} pinColor={COLORS.primary} key={Date.now.toString()} title={\"Помогите!\"} coordinate={notification.request.content.data.loc} />
                }
            </MapView>
        </View>

你找到解决方案了吗？我在处理 React Native Maps 时遇到了完全相同的问题
@amerw 我对地图使用了 useMemo 钩子并传递了将触发其重新渲染的参数
感谢您的回答，我设法通过将区域道具更改为 initialRegion 并删除所有设置区域状态的代码并改用 animateToRegion 方法来解决此问题

标签： reactjs expo maps native

【解决方案1】：

我对地图使用了 useMemo 钩子，并传递了将触发其重新渲染的参数，以确保其他状态更改不会触发它。

【讨论】：