React Native Maps：通过套接字 io 客户端动态更新标记坐标时标记位置不准确

Question

我正在尝试使用套接字io客户端更新标记坐标，没有显示错误，但地图中的标记位置并不像预期的那么准确。

请检查下面显示的我的代码片段。

地图视图组件：

<MapView
        style={styles.map}
        region={{
          latitude: lat,
          longitude: lng,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421,
        }}
>
    <UrlTile
          urlTemplate="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          maximumZ={19} 
    />

    <Marker
          coordinate={{ latitude: lat, longitude: lng }}
          title={"San Francisco"}
          description={"This is a description of the oten"}
    />
</MapView>

useEffect

功能：

const [lat, setLat] = useState(10.330121);
const [lng, setLng] = useState(123.900298);

useEffect(() => {
    const socketIo = io(SOCKET_URL);

    socketIo.on("testLocation", (data) => {
        console.log("testLocation", data);
        setLat(data.lat);
        setLng(data.lng);
    });

    // - disconnect on unmount
    return () => {
        socketIo.disconnect();
    };
}, []);

Answer 1

您是否尝试过在主函数之外使用地图组件？可能当状态改变时，地图组件必须重新渲染