2019开年新项目React-Native开发环境搭建

概述：

1. 基于react-native + antd-mobile的开发方式。
2. 使用android studio 安装sdk ndk 来调试开发的页面。
3. iso版本app需要使用mac调试

资源：

1. react-native 资源https://reactnative.cn/docs/getting-started/ 特别好，能让你快速上手知道如何开始
2. antd-mobile 资源https://rn.mobile.ant.design/docs/react/introduce-cn
3. android-sdk资源https://developer.android.google.cn/
4. expo: npm install expo
5. babel-plugin-import: npm install babel-plugin-import --save-dev
6. 可以使用yrm来管理yarn registry  https://www.npmjs.com/package/yrm
7. redux http://uprogrammer.cn/redux-in-chinese/

开发环境：

1. android studiohttps://developer.android.google.cn/
2. vs codehttps://code.visualstudio.com/

[01]快速环境搭建

1. 下载所需软件，vscode, android studio, android ndk, nodejs, watchman.
2. 安装android studio， 安装后会报错，提示无法更新，选择设置代理，然后根据[ISSUE]使用国内镜像更新android sdk来设置代理服务器。可以使用studio的android sdk manager来更新sdk，需，或者选择国内镜像。也可以使用本地的sdk压缩包，解压后手动配置android sdk
3. 配置系统环境变量：
   1. ANDROID_HOME=/path/to/android/sdk
   2. PATH增加 %ANDROID_HOME%/tools, %ANDROID_HOME%/tools/bin, %ANDROID_HOME%/platform-tools, %ANDROID_HOME%/emulator, /path/to/watchman, /path/to/android/ndk
4. 安装vscode，安装相应的扩展，必要：搜索React Native Tools，直接安装。可选，中文支持，Java支持，Prettier - Code formatter等。也可在vscode提示建议安装时再自行选择安装。
5. 安装NodeJS, nodejs.org官网选择合适的稳定版安装。
6. 设置国内源，

   1. npm config set registry https://registry.npm.taobao.org --global

   2. npm config set disturl https://npm.taobao.org/dist --global

      （注意不要使用cnpm，可能会产生奇怪的错误）

7. 安装YARN, react-native-cli (全局安装)

   1. npm install -g yarn react-native-cli

8. 设置YARN的国内镜像源

   1. yarn config set registry https://registry.npm.taobao.org --global
      

   2. yarn config set disturl https://npm.taobao.org/dist --global

       

9. 执行react-native init SanyCRM初始化项目
10. cd SanyCRM, 执行react-native run-android调试项目，调试项目时需要使用usb接入手机，或者使用android studio创建一个avd，具体创建方法可自行百度一下。
11. 完成！

[02]需要掌握的知识及学习路径

技术栈：

1. react, 2小时快速入门http://www.runoob.com/react/react-tutorial.html 主要介绍什么react，以及如何使用react，目标就是了解react开发环境是如何搭建以及如何编写react的代码。
2. react-native，一天快速入门https://reactnative.cn/docs/getting-started/ 跟第一项有些重复的内容，可快速过一遍或者在巩固一下知识。目标是了解如何构建rn项目以及编写helloworld
3. redux， 2小时快速入门https://github.com/react-guide/redux-tutorial-cn react及rn极其重要的插件
4. graphql
5. antd-mobile

[ISSUE]使用国内镜像更新android sdk

一、使用国内镜像源：

先在这里推荐几个：

1、东软信息学院

mirrors.neusoft.edu.cn     端口：80
2、北京化工大学

ubuntu.buct.edu.cn/ubuntu.buct.cn  端口：80
3、中国科学院开源协会

mirrors.opencas.cn (mirrors.opencas.org/mirrors.opencas.ac.cn)    端口：80
4、上海GDG镜像服务器

sdk.gdgshanghai.com   端口：8000 
5、电子科技大学

mirrors.dormforce.net  端口：80

二、使用方法

启动 Android SDK Manager ，打开主界面，依次选择「Tools」、「Options…」，弹出『Android SDK Manager – Settings』窗口；

在『Android SDK Manager – Settings』窗口中，在「HTTP Proxy Server」和「HTTP Proxy Port」输入框内填入mirrors.neusoft.edu.cn和80，并且选中「Force https://… sources to be fetched using http://…」复选框。设置完成后单击「Close」按钮关闭『Android SDK Manager – Settings』窗口返回到主界面；

[ISSUE]编译调试时报 -Xlint:deprecation 错误

注:XXX.java使用或覆盖了已过时的 API。:react-native-sentry:compileDebugJavaWithJavac

注: 有关详细信息, 请使用 -Xlint:deprecation 重新编译。

注: 某些输入文件使用了未经检查或不安全的操作。

将如下代码添加到build.gradle中

 

allprojects {

  gradle.projectsEvaluated {

    tasks.withType(JavaCompile) {

      options.compilerArgs << "-Xlint:unchecked" << "-Xlint:deprecation"

    }

  }

}