React Native V0.64.4版本 开发环境搭建及问题
一、开发环境依赖安装
必须安装的依赖有：Node、Watchman、Xcode 和 CocoaPods。
brew安装及问题：
苹果电脑标准安装脚本：
/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"
1、系统权限需要管理员
2、有权限后公司内网可能无法访问raw.githubusercontent.com、gitee.com导致安装失败
解决方法：
使用其它镜像安装
参考：
https://mirror.tuna.tsinghua.edu.cn/help/homebrew/
https://gitee.com/cunkai/HomebrewCN/
如果上面的脚本无法安装可以尝试把 https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh 下载到本地执行
brew install node
npm install -g yarn
brew install watchman
watchman本地安装
https://facebook.github.io/watchman/docs/install.html
$ unzip watchman-*-macos.zip
$ cd watchman-vYYYY.MM.DD.00-macos
$ sudo mkdir -p /usr/local/{bin,lib} /usr/local/var/run/watchman
$ sudo cp bin/* /usr/local/bin
$ sudo cp lib/* /usr/local/lib
$ sudo chmod 755 /usr/local/bin/watchman
$ sudo chmod 2777 /usr/local/var/run/watchman
Android Studio 安装
JAVA环境
React Native 需要 Java Development Kit [JDK] 1.8（暂不支持 1.9 及更高版本，注意 1.8 版本官方也直接称 8 版本）可以使用homebrew安装：
brew install adoptopenjdk/openjdk/adoptopenjdk8
javac -version（请注意是 javac，不是 java）来查看你当前安装的 JDK 版本。
export JAVA_HOME="/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home" export PATH="$JAVA_HOME/bin:$PATH" export CLASSPATH="$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar"
安装 Android Studio 参考：https://reactnative.cn/docs/0.64/environment-setup，建议选择自定义安装
配置 ANDROID_HOME 环境变量
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk export PATH=$PATH:$ANDROID_SDK_ROOT/emulator export PATH=$PATH:$ANDROID_SDK_ROOT/tools export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
CocoaPod安装
参考清华镜像源：https://mirror.tuna.tsinghua.edu.cn/help/CocoaPods/
pod install 报无法访问github.com解决方法，可以将这个依赖包的下载地址修改成镜像域名，
例如将~/.cocoapods/repos/master/Specs/0/0/0/LiucyNet/0.1.0/LiucyNet.podspec.json中source 对应的 github.com更新镜像域名。
找到报错的包：cd ~/.cocoapods/repos/master/Specs && find ./ -name LiucyNet
其它国内镜像
https://doc.fastgit.org/CocoaPods/Specs.git
https://gitclone.com/CocoaPods/Specs.git
https://gitee.com/mirrors/CocoaPods/Specs.git
https://github.com.cnpmjs.org/CocoaPods/Specs.git
https://gitcafe.com/akuandev/Specs.git
cd ~/.cocoapods/repos/master/
git clone https://github.com/CocoaPods/Specs.git
pod相关命令：
# 第一次使用安装框架
# 只用安装一次，之后使用添加删除都用 pod update --no-repo-update
pod install
pod search AFNetworking
pod install --no-repo-update
pod install --verbose --no-repo-update 安装框架，不更新本地索引，速度快
pod repo remove master
pod repo list
pod repo update
pod repo
Ruby安装及问题
https://ruby-china.org/wiki/rbenv-guide
ruby 源检查：gem sources -l
移除：gem sources --remove https://rubygems.org/
替换添加国内的镜像源：gem sources --add https://gems.ruby-china.com
https://ruby-china.org/wiki/rbenv-guide
https://www.jianshu.com/p/d1d2e68984ef
git clone https://hub.nuaa.cf/libevent/libevent.git
环境变量不生效问题
切换终端到bash
chsh -s /bin/bash
切换终端到zsh
chsh -s /bin/zsh
二、React Native Web开发
Expo Web 开发文档
https://docs.expo.dev/guides/progressive-web-apps/
https://docs.expo.dev/workflow/web/
工具安装
npm install --global expo-cli
npm install -g react-native-cli
脚手架使用
指定版本：npx react-native init AwesomeProject --version 0.66.0
指定模版：npx react-native init AwesomeTSProject --template react-native-template-typescript
Expo指定版本：expo init --template expo-template-blank@sdk-43
备注：RN0.64.4 需要使用 exp sdk v43这个版本，否则可能会出版本兼容问题
EXPO SDK及模板的版本情况可以查询：https://github.com/expo/expo/blob/sdk-43/templates/expo-template-blank/package.json
如果之前在模拟器中安装过高版本，可以先删除模拟器中的expo go 重新使用 yarn android 时会根据当时版本重新下载安排对应的app
三、调试相关工具
查看可用的iOS设备：xcrun simctl list devices
查看可用的Android设备：adb devices
查询模拟器：emulator -list-avds
打开模拟器：emulator -avd Pixel_3a_API_33_x86_64
vscode插件：
真机开发时，调试应用只需要晃动下设备即可打开调试选项
Android模拟器调试的快捷键是【Command +M】
iOS模拟器的快捷键是【Command +D】
chrome 开发者工具
快捷键【Command +Option +I】即可打开调试窗口
四、其它开发资源
React Native 端开发前注意：
https://taro-docs.jd.com/docs/react-native-remind
React Navigation中文文档
https://www.reactnavigation.org.cn/docs/guide-quick-start
React Native中文文档
https://reactnative.cn/docs/0.64/environment-setup
Expo SDK 升级信息，查看版本升级情况
https://docs.expo.dev/workflow/upgrading-expo-sdk-walkthrough/
Expo沙盒工具简介
https://www.cnblogs.com/marsk6/p/15221411.html
开发环境搭建
https://juejin.cn/post/7135641433834258445
android-studio-emulator模拟器安装
https://docs.expo.dev/workflow/android-studio-emulator/?redirected
Flex 布局教程：语法篇
https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
轻松学会 React 钩子
https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html
React 入门实例教程
https://www.ruanyifeng.com/blog/2015/03/react.html
组件库
https://mobile.ant.design/zh
https://nativebase.io/
https://reactnativepaper.com/
https://callstack.github.io/react-native-paper/icons.html
https://www.awesome-react-native.com/
