本文以Mac为例,搭建ReactNative完整原生开发环境;
ps:上网查了查,好像国内用RN的做Mapbox的公开资料很少啊,貌似领先了一个车位?滴 学生卡~
本项目代码:https://github.com/volov157/MapBoxReactNativeDemo.git
ReactNative的环境搭建
react native中文网:https://reactnative.cn/docs/getting-started.html
开发平台macOS,目标平台:android;
没有安装homebrew的可以点击:参考链接
-
打开iTerm,执行:
brew install node
brew install watchman
安装完成后,执行命令查看node和watchman版本,如图所示: -
插件安装:
官方建议Node安装完成后设置npm镜像以加速后边的过程(或使用科学上网工具):npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global执行:
npm install -g yarn react-native-cli
Yarn安装完后也要设置镜像源(facebook提供替代npm工具,npm yarn二选一即可);yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global安装完成后在iTerm中输入-v通过查看版本,判定是否安装成功,如图所示:
-
java和android studio的安装及环境配置此处略过。有一个需要注意的地方是ReactNative
需要通过环境变量知道你的android sdk 安装的什么路径, 所以需要将如下内容添加到.bash_profile中;
⚠️如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator
添加完成后,使用source命令来生效你所修改的设置。 -
打开iTerm,依次执行
mkdir RNProjects
cd RNProjects
react-native init DemoHello
通过adb devices查看设备是否在线及ls命令查看文件目录,确保无误后;
执行react-native run-android
,会开启js server,如图所示:
-
ios运行同理,在iTerm中进入到项目,然后输入
react-native run-ios
即可;
到这里ReactNative的开发环境和HelloWorld编写完成。
Mapbox的接入
- IDE选择的是 VScode,下载地址:https://code.visualstudio.com/
安装完成后打开VScode,添加reactnative插件,安装后重启VScode,如图所示:
- react-native-mapbox-gl 下载地址:Demo链接
git下载地址:git clone [email protected]:mapbox/react-native-mapbox-gl.git
安装所需sdk(二选一):
Yarn:yarn add @mapbox/react-native-mapbox-gl
Nom:npm install @mapbox/react-native-mapbox-gl --save
- VScode导入项目,在example目录下创建accesstoken文件,将mapbox官网登陆后的key输入后保存,如图所示:
- 打开Vscode中Terminal,cd进入到example目录中,然后执行 npm i,会安装node_models依赖;
⚠️在执行npm i之前必须确保已经添加accesstoken文件并将mapbox官网给的key输入其中,否则会报错无法找到access_token;
出现蓝色的reactnative的小图标表示安装完成,如图所示:
- 按照官方教程依次修改/添加:
project:build.gradle
app:build.gradleallprojects { repositories { jcenter() maven { url "$rootDir/../node_modules/react-native/android" } maven { url "https://jitpack.io" } maven { url "https://maven.google.com" } } }
settings.gradledependencies { compile project(':mapbox-react-native-mapbox-gl') }
MainApplication.javainclude ':mapbox-react-native-mapbox-gl' project(':mapbox-react-native-mapbox-gl').projectDir = new File(rootProject.projectDir, '../node_modules/@mapbox/react-native-mapbox-gl/android/rctmgl')
⚠️按照上述代码添加完成后保存,一定要按照官方的提示一步一步走:import com.mapbox.rctmgl.RCTMGLPackage; @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new RCTMGLPackage() ); }
(我就这里走偏了,直接执行ract-native run-android
,然后报错Android project not found. Maybe run react-native android first?
,StackOverflow有个答案说让执行react-native upgrade
,然后yes更新就行了,这个坑掉进去好半天才爬出来。)
运行npm start
打开Android Studio,选择导入项目(导入example文件夹中的android)
下图这个就是通过gradle去构建ReactNative的项目,参照官网:
点击ok后,Android Studio开始Gradle编译,不出意外完成后报错;
错误原因是distributionUrl会执行当前项目中的版本版本,而Android Studio会执行默认的gradle插件版本,gradle插件版本会影响build脚本,因对应关系失败,会导致该异常;
所以说了半天,改成distributionUrl=https\://services.gradle.org/distributions/gradle-3.3-all.zip
重新编译就行了;
关于这部分可以参考资料:https://developer.android.com/studio/releases/gradle-plugin - Android Studio 编译通过后,回到VScode Terminal,执行
react-native run-android
,可以看到Terminal 提示 BUILD SUCCESSFUL, 小窗口index.android.js 100%开启成功如图:
- ios 运行,执行
react-native run-ios
,报错undefind is not an object()....
,删除ios文件夹的build文件,重新编译后运行成功。至于为什么重新编译后在运行就可以,我也不太清楚,有ios大佬告知一下原由么,感谢!
- 至此关于ReactNative环境搭建及MapBox在ReactNative简易教程结束;