React Native V0.64.4版本 开发环境搭建及问题
一、开发环境依赖安装
必须安装的依赖有:Node、Watchman、Xcode 和 CocoaPods。
brew安装及问题:
苹果电脑标准安装脚本:
1 | /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
1 2 3 4 5 6 7 | $ 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 版本。
1 2 3 | 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 环境变量
1 2 3 4 5 | 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/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库