RN缺點(diǎn)：白話就是RN通過(guò)中間一個(gè)bridge，將Text 轉(zhuǎn)化成安卓代碼Text給安卓用，轉(zhuǎn)化成iOS代碼UILable 給蘋果用，這個(gè)bridge是單線程，業(yè)務(wù)太多，容易阻塞，用戶卡頓，還會(huì)造成ios和安卓代碼不一致，要頻繁判斷ios 跟安卓分別設(shè)置。
RN優(yōu)點(diǎn)：完美實(shí)現(xiàn)熱更新

Flutter：直接跟安卓和ios進(jìn)行操作，不需要通過(guò)橋，通過(guò)谷歌引擎，將蘋果的UILable變成Text。
缺點(diǎn)：蘋果不支持熱更，蘋果要嵌入谷歌引擎，包大。

開發(fā)?具M(jìn)ac電腦：

• Xcode
• Android Studio https://developer.android.google.cn/studio
  • 要安裝插件Dart、Flutter，安裝完成后重啟Perference>Plugins
  • 安裝模擬器
• vs code https://code.visualstudio.com
  • 常用VScode插件
    • Bracket Pair Colorization 彩虹括號(hào)
    • Chinese (Simplified) 中文版插件
    • Dart 、 Flutter flutter開發(fā)插件

配置環(huán)境

1. 下載Flutter SDK 下載鏈接
2. 將安裝包zip解壓到你想安裝Flutter SDK的路徑（這個(gè)?錄以后不需要?jiǎng)?，故不建議放在deskTop）
   3.添加 flutter 相關(guān)?具到path中

export PATH=`??存放flutter的路徑`/flutter/bin:$PATH

4.配置鏡像

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

5.運(yùn)? flutter doctor 查看安裝結(jié)果如何

image.png

如果報(bào)這個(gè)錯(cuò)，其中這個(gè)cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest"怎么辦呢，意思是cmdline-tools這個(gè)東西沒有安裝，我們?cè)贏ndroid Studio中的設(shè)置里找到并安裝即可，如下圖

image.png

之后還有Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
我們運(yùn)行這個(gè)命令，之后要輸入數(shù)次y，最后提示
All SDK package licenses accepted
就是成功了

再輸入flutter doctor 就全是綠色對(duì)號(hào)了

提示
flutter的開發(fā)環(huán)境配置好后，退出終端，再進(jìn)入終端，輸入flutter doctor命令后，會(huì)顯示，zsh: command not found: flutter的錯(cuò)誤，原因是新版Mac 從bash變成了zsh

open ~/.zshrc 

如果文件不存在

vim ~/.zshrc 

open ~/.bash_profile

//添加下面三行，保存

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/計(jì)算機(jī)名稱/flutter/bin:$PATH  //flutterSDK的路徑替換一下

然后執(zhí)行

source ~/.bash_profile

然后把bash_profile的文件復(fù)制到zshrc中去

創(chuàng)建一個(gè)項(xiàng)目

flutter create flutterdemo（項(xiàng)目名不能有大寫）

1.vscode 創(chuàng)建，安裝插件Dart、Flutter，Awesome Flutter Snippets
直接在搜索框 （沒有的話就 command+shift+p）

image.png

Flutter: New Project

2.用Android Studio 直接new flutter project

image.png

網(wǎng)絡(luò)請(qǐng)求 這里選擇用VSCode開發(fā)
pubspec.yaml 文件里面引用框架和圖片等，如要使用http網(wǎng)絡(luò)請(qǐng)求，要在文件中引用一下

dependencies:
  flutter:
    sdk: flutter
http: ^1.0.0

image.png