ReactNative环境搭建及MapBox for ReactNative的简单使用

本文以Mac为例，搭建ReactNative完整原生开发环境；

ps:上网查了查，好像国内用RN的做Mapbox的公开资料很少啊，貌似领先了一个车位？滴 学生卡~

本项目代码：https://github.com/volov157/MapBoxReactNativeDemo.git

ReactNative的环境搭建

react native中文网：https://reactnative.cn/docs/getting-started.html

开发平台macOS，目标平台：android；

没有安装homebrew的可以点击：参考链接

1. 打开iTerm，执行：
   brew install node
brew install watchman
   安装完成后，执行命令查看node和watchman版本，如图所示：

2. 插件安装：
   官方建议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通过查看版本，判定是否安装成功，如图所示：

   

3. 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命令来生效你所修改的设置。

4. 打开iTerm，依次执行
   mkdir RNProjects
cd RNProjects
react-native init DemoHello
   通过adb devices查看设备是否在线及ls命令查看文件目录，确保无误后；
   执行react-native run-android,会开启js server，如图所示：
   
   
   

5. ios运行同理，在iTerm中进入到项目，然后输入react-native run-ios即可；
   到这里ReactNative的开发环境和HelloWorld编写完成。

Mapbox的接入

1. IDE选择的是 VScode，下载地址：https://code.visualstudio.com/
   安装完成后打开VScode，添加reactnative插件，安装后重启VScode，如图所示：
   
2. 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
3. VScode导入项目，在example目录下创建accesstoken文件，将mapbox官网登陆后的key输入后保存，如图所示：
   
4. 打开Vscode中Terminal，cd进入到example目录中，然后执行 npm i，会安装node_models依赖；
   ⚠️在执行npm i之前必须确保已经添加accesstoken文件并将mapbox官网给的key输入其中，否则会报错无法找到access_token；
   出现蓝色的reactnative的小图标表示安装完成，如图所示：
   
   
5. 按照官方教程依次修改／添加：
   project：build.gradle

   allprojects {
       repositories {
           jcenter()
           maven { url "$rootDir/../node_modules/react-native/android" }
           maven { url "https://jitpack.io" }
           maven { url "https://maven.google.com" }
       }
   }
   

   app：build.gradle

   dependencies {
   	compile project(':mapbox-react-native-mapbox-gl')
   }
   

   settings.gradle

   include ':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')
   

   MainApplication.java

   import com.mapbox.rctmgl.RCTMGLPackage;
   @Override
   protected List getPackages() {
     return Arrays.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
6. Android Studio 编译通过后，回到VScode Terminal，执行react-native run-android，可以看到Terminal 提示 BUILD SUCCESSFUL, 小窗口index.android.js 100%开启成功如图：
   
7. ios 运行，执行react-native run-ios,报错undefind is not an object()....，删除ios文件夹的build文件，重新编译后运行成功。至于为什么重新编译后在运行就可以，我也不太清楚，有ios大佬告知一下原由么，感谢！
   
8. 至此关于ReactNative环境搭建及MapBox在ReactNative简易教程结束；