react-native-mapbox-gl初体验

react-native-mapbox-gl下载地址

启动示例程序

下载地址自带一个例子项目 位于根目录的example文件夹下
要运行示例, 首先需要在mapbox官网注册一个账号, 并创建一个 token

image.png

上图是我已经创建好了的, 复制 default public token 中的内容
cd 到 example 文件夹下 执行下面操作

vim accesstoken
// 粘贴复制的token
保存退出

如果不熟悉 vim 用其他方法创建一个文件把 token 复制到里面也可以
之后

npm install

等待完成后 就可以 react-native run-ios / react-native run-android 了

在项目中使用(iOS)

在 rn 项目目录中
Yarn

yarn add @mapbox/react-native-mapbox-gl

Npm

npm install @mapbox/react-native-mapbox-gl --save

安装完成后
在 ios 文件夹下 使用pod init创建 Podfile 文件, 将下面内容复制进去(注意替换项目名)

target '这里是你自己的项目名' do 
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for mapTest
  inhibit_all_warnings!

  rn_path = '../node_modules/react-native'
  # Flexbox Layout Manager Used By React Native
  pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga/Yoga.podspec'

  # React Native
  pod 'React', path: '../node_modules/react-native', subspecs: [
    # Comment out any unneeded subspecs to reduce bundle size.
    'Core',
    'DevSupport',
    'RCTActionSheet',
    'RCTAnimation',
    'RCTBlob',
    'RCTCameraRoll',
    'RCTGeolocation',
    'RCTImage',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTTest',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'RCTLinkingIOS'
  ]
# React Native third party dependencies podspecs
  
  pod 'Folly', :podspec => "#{rn_path}/third-party-podspecs/Folly.podspec"
  # Mapbox
  pod 'react-native-mapbox-gl', :path => '../node_modules/@mapbox/react-native-mapbox-gl'

end
 
 post_install do |installer|
    installer.pods_project.targets.each do |target|
      if target.name == "React"
        target.remove_from_project
      end
    end
  end

之后

pod install

等待结束后即可配置完成 可以 run 了
如果电脑没有安装 pod 请自行 google