安装配置各类软件、环境
RN部分
Flutter 部分
- 安装配置Flutter
- 走一个demo

2020-08 初稿 2021-04-28 更新

按：

最近要跟着大佬体验一下 react-native 和 flutter ，因为都是跨端开发，开发环境大差不差，如果你配置过其中一个，配另一个会很轻松。

这里总结一下如何用Mac配置开发环境。注意，这个是Mac。如果你是windows你不需要关注 Xcode CocoaPods 部分。

Mac下安装React Native、Flutter开发环境 - 图1

安装配置各类软件、环境

Mac平台专属：Xcode

下载

xcode 是mac平台下开发 iOS 等苹果生态下软件
在 App Store 中下载最新版 Xcode ，体积较大大概8.xG（好家伙现在已经11g了），下载完会自动安装。需要你创建一个空的项目，最终能看到源码界面即可。

安装命令行工具

这个步骤你可能不需要做：
还需要安装 Xcode Command Line Tools ，打开 Xcode 然后选择 Preferences.../Locations/ 选择一个并安装。

安装模拟器

安装模拟器。 Preferences.../Components 选择一个模拟器。

启动模拟器

安装后执行启动。open -a Simulator

可以通过 Device来选择启动的iOS设备。

Mac平台专属：CocoaPods

CocoaPods 是一个用来管理 Xcode 依赖库的项目。

安装

sudo gem install cocoapods
pod setup

进一步的配置参考 CocoaPods安装、使用、提速、问题解决(2019.10.28更新)

以上是mac平台下需要配置的软件和环境。

双平台：VSCode 不熟可不安装

搜索vscode官方直接下载安装即可。然后从插件里搜索安装 flutter插件。

关于 vscode 和 as的权衡，前者轻量，后者工具完善侧重调试，as的安装和配置不可避免。

双平台：Android Studio

准备 JDK Maven

找公司后端要jdk，说不要太老就行（笑）。也可以自己下载。

Mac配置可参考这个 Mac环境下配置Java开发环境（jdk maven tomcat idea）只关注前两个
Winwos配置可参考这个 https://zhuanlan.zhihu.com/p/34086656

总的来说：

下载安装java安装包
配置环境变量

下载

在这里下载 https://developer.android.google.cn/studio#downloads 还挺快的，以前网络不通就很麻烦。

运行

第一次运行会让你选择 proxy ，这里懒得折腾了，就填写了自己的 proxy，后来发现有的地方可以直接访问，备个梯子最好。

一路next, standard, finish。然后会从 dl.google.com 上下载一些东西。默认没进度条，放着别动了。

启动 Android Studio > Tools > Android > AVD Manager ，然后选择 Create Virtual Device 选项。

在 Emulated Performance 下选择 Hardware - GLES 2.0 选项来开启硬件加速。

在 Android Virtual Device Manager 中，点击工具栏中的 Run 选项，模拟器会启动并为你所选择的系统版本和设备显示出相应的界面。

网上教程太多了，知乎随便一搜：

顺手在 Android Studio 插件搜索 flutter 安装重启。早晚要安装。
如果失败就多试几次，还不行就考虑挂梯子。理论上也可以离线安装插件。

RN部分

默认你已经安装并配置好了 brew 。

安装Node，前端必备，版本不要太老。
安装 watchman brew install watchman ，这里似乎需要 python3.8，安装好之后执行 echo 'export PATH="/usr/local/opt/python@3.8/bin:$PATH"' >> ~/.zshrc 即可

这里待补充。

Flutter 部分

安装配置Flutter

Mac下安装React Native、Flutter开发环境 - 图6 最终效果

访问国内的指导页面

注：windows点这里 https://flutter.cn/docs/get-started/install/windows

配置国内镜像。Mac把下面代码加入 ~/.zshrc 中，Windows放入环境变量。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

获取SDK，总结了三种途径：
- 官方在线。官方文档这里推荐的是 github，方便后续升级。参考：为 Flutter 设定镜像配置
- 离线版。Mac访问这里获取离线版SDK
- gitee中国源 https://gitee.com/mirrors/Flutter

下载指导：

不是很推荐官方github第一次下载异常缓慢。
离线版是打包之后的压缩包下载飞速，见下图，版本升级在项目开发中一般会滞后升级，较为推荐
gitee有官方同步源，效果和官方一致，克隆也非常快。 git clone git@gitee.com:mirrors/Flutter.git -b stable

otto@192 flutter % git clone git@gitee.com:mirrors/Flutter.git -b stable
Cloning into 'Flutter'...
remote: Enumerating objects: 7153, done.
remote: Counting objects: 100% (7153/7153), done.
remote: Compressing objects: 100% (3802/3802), done.
remote: Total 324164 (delta 4632), reused 4949 (delta 3036), pack-reused 317011
Receiving objects: 100% (324164/324164), 113.15 MiB | 1.08 MiB/s, done. <-- 看这里，下载速度也很快
Resolving deltas: 100% (259422/259422), done.

（离线版）下载下来，解压放到你喜欢的目录。比如我放到了这里 /Users/x/flutter.1.20.0
注册系统变量。方便随时使用 flutter 。记住随时 source ~/.zshrc
```
export PATH="$PATH:/Users/xinbao/flutter.1.20.0/bin"
```
验证以上步骤，执行 which flutter 验证是否生效
windows是在env环境变量 path中添加目录
flutter doctor 查看状态。第一次运行一个flutter命令（如flutter doctor）时会很慢，它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

这里走官方源会慢一些。下载DartSDK、flutterTool等工具。最终会展示当前还有哪些准备工作没有完成。

走一个demo

创建一个demo flutter create my_app
通过一个编辑器打开，比如 vscode ，然后安装 flutter 插件。也可以使用 as来创建安装。
打开项目。
- 先打开一个模拟器
- 然后 vscode 右下角选择 No Device 选中
启动项目。 flutter run 等待。
在真实设备中比如iPhone中运行，先忽略 https://flutter.cn/docs/get-started/install/macos