devStandard/docs/learning/7-react/10-react native.md
2025-03-29 14:35:49 +08:00

79 lines
1.4 KiB
Markdown
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# react native
> Create native apps for Android, iOS, and more using React
* 中文镜像: https://www.reactnative.cn/
* 官网: https://reactnative.dev/
## 环境搭建
https://reactnative.cn/docs/environment-setup
### 基础环境
```sh
node lts版本 # 可以使用fnm来管理多个版本
npm install -g yarn
```
### 安卓
```sh
# Java Development Kit [JDK] 11
brew tap homebrew/cask-versions
brew install --cask zulu11
javac -version
```
Android Studio 安装与设置
`Intel x86 Atom_64 System Image` 可以不安装, 使用第三方模拟器或者实体机
### 安卓模拟器
模拟器可以安装mumu模拟器
```sh
# 验证mumu是否启动, macos mumu端口是22471
sudo lsof -i:22471
adb connect 127.0.0.1:22471 # 提示failed to connect 不用管
adb kill-server
adb start-server
adb devices
# 验证
adb shell pm list packages
```
### ios
```sh
brew install watchman
```
xcode: 最新版到appstore下载, 旧版到`https://developer.apple.com/download/all/?q=xcode`下载
## 创建项目
```sh
npx react-native@latest init AwesomeProject
cd AwesomeProject
yarn android
```
`Metro` 界面, 按下按键 `a`, 安装到模拟器
### debug
按键 `d` , 显示菜单, 选择debug模式
```sh
# 或者通过adb发送按键
adb shell input keyevent 82
```
闪退原因:未知
```sh
# 使用更强大的react-native-debugger代替chrome
brew install --cask react-native-debugger
```