mapbox是基于谷歌地图集成的地图插件,可以在很多平台使用,具体可以看mapbox官网。这里具体讲解“react-native-mapbox-gl”插件,是mapbox结合react native封装的地图插件,可以很好的实现在页面上呈现地图的效果。

demo地址:https://github.com/mapbox/react-native-mapbox-gl

mapbox官网:https://www.mapbox.com/

在iOS上运行:

1.下载demo后解压,接着进入example文件夹下,根据readme可知,需要添加一个json文件,存放tooken,因此如果没有mapbox账户,需要进入mapbox官网注册一个,就可以得到tooken,接着在根目录下添加‘env.json文件’,里面存放tooken

2.执行“npm install”命令下载插件

3.执行“react-native link”命令,link插件

4.执行“react-native run-ios”命令,在iOS上运行项目,就可以看到demo效果了

在android上运行:

react-native-mapbox-gl的更多相关文章

  1. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  2. React Native 之 Text的使用

    前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所 ...

  3. React Native环境配置之Windows版本搭建

    接近年底了,回想这一年都做了啥,学习了啥,然后突然发现,这一年买了不少书,看是看了,就没有完整看完的.悲催. 然后,最近项目也不是很紧了,所以抽空学习了H5.自学啃书还是很无趣的,虽然Head Fir ...

  4. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  5. 【腾讯Bugly干货分享】React Native项目实战总结

    本文来自于腾讯bugly开发者社区,非经作者同意,请勿转载,原文地址:http://dev.qq.com/topic/577e16a7640ad7b4682c64a7 “8小时内拼工作,8小时外拼成长 ...

  6. React Native环境搭建以及几个基础控件的使用

    之前写了几篇博客,但是没有从最基础的开始写,现在想了想感觉不太合适,所以现在把基础的一些东西给补上,也算是我从零开始学习RN的经验吧! 一.环境搭建 首先声明一下,本人现在用的编辑器是SublimeT ...

  7. React Native组件介绍

    1.React Native目前已有的组件 ActivityIndicatorIOS:标准的旋转进度轮; DatePickerIOS:日期选择器: Image:图片控件: ListView:列表控件: ...

  8. React Native图片控件的使用

    首先定义组件 import { AppRegistry, StyleSheet, Text, View, Image,} from 'react-native'; 然后将render返回中的模版增加I ...

  9. react-native学习笔记--史上最详细Windows版本搭建安装React Native环境配置

    参考:http://www.lcode.org/react-native/ React native中文网:http://reactnative.cn/docs/0.23/android-setup. ...

  10. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

随机推荐

  1. opencv_python使用cv2.imread()读取中文路径报错问题(转)

    原地址:https://blog.csdn.net/liuqinshouss/article/details/78696032 1 说明 本篇中使用的opencv版本为3.3,python使用的版本为 ...

  2. 2.6 Go 读取CSV

    Go读取CSV文件,其内容被转换成字符串数组 package main import ( "encoding/csv" "fmt" "io/iouti ...

  3. proxyTable设置跨域

    如何设置跨域 1.在config--index.js 中配置 proxyTable: { '/api': { target: 'http://www.xxx.com', //目标接口域名 change ...

  4. ORACLE INSERT ALL 用法

    1INSERT ALL 1.1句法 multi_table_insert :: = conditional_insert_clause :: = 1.2multi_table_insert 在多表插入 ...

  5. golang io.ReadFull

    buf := make([]byte, 10, 10) file, _ := os.Open("./data.txt") n, err := io.ReadFull(file, b ...

  6. centos 7安装phpMyadmin

    1.phpmyadmin官网下载多语言包 2.找到libraries目录下的config.default.php1)查找$cfg['PmaAbsoluteUri'] 设置默认访问网址 2)查找$cfg ...

  7. Java学习之路(一):日常第一课,认识JAVA

    Java的介绍 语言的起源 Java是SUN(Stanford University Network 斯坦福大学网络公司) 1995年推出的一门高级编程语言. Java名称的来源: Java最初是被命 ...

  8. 自适应网页设计(Responsive Web Design)别名(响应式web设计)转载阮一峰

    随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...

  9. selenium+Python(事件)

    1.操作测试对象前面讲到了不少知识都是定位元素,定位只是第一步,定位之后需要对这个元素进行操作.鼠标点击或者键盘输入,这要取决于我们定位的是按钮还输入框.一般来说,webdriver 中比较常用的操作 ...

  10. Bash编程(6) String操作

    1. 拼接 1) 简单的字符串拼接如:PATH=$PATH:$HOME/bin.如果拼接的字符串包含空格或特殊字符,需要使用双引号括起,如: var=$HOME/bin # 注释并不是赋值的一部分 v ...