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的可以点击：参考链接

打开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
```
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<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简易教程结束；