首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >以mapbox-gl的形式使用react-native-mapbox-gl /map

以mapbox-gl的形式使用react-native-mapbox-gl /map
EN

Stack Overflow用户
提问于 2020-12-02 17:42:30
回答 1查看 158关注 0票数 0

我想以mapbox- gl的形式使用react-native-mapbox-gl/映射,例如,我尽我所能在useEffect中初始化MapView组件,而不是在组件中。我是否可以重写下面的代码,以便于react native谢谢阅读,

代码语言:javascript
复制
import React, { useEffect, useRef, useState } from "react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const styles = {
  width: "100vw",
  height: "calc(100vh - 80px)",
  position: "absolute"
};

const MapboxGLMap = () => {
  const [map, setMap] = useState(null);
  const mapContainer = useRef(null);

  useEffect(() => {
    mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_KEY;
    const initializeMap = ({ setMap, mapContainer }) => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11", // stylesheet location
        center: [0, 0],
        zoom: 5
      });

      map.on("load", () => {
        setMap(map);
        map.resize();
      });
    };

    if (!map) initializeMap({ setMap, mapContainer });
  }, [map]);

  return <div ref={el => (mapContainer.current = el)} style={styles} />;
};

export default MapboxGLMap;
EN

回答 1

Stack Overflow用户

发布于 2020-12-02 17:45:48

因为在react原生mapbox中没有提到它,所以我会说它的工作方式不同,所以没有

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/65105569

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档