React Native 开发框架

npx react-native doctor

React Native Community CLI

• React Native Community CLI

npx @react-native-community/cli@latest init

Basic

创建新项目:

npx react-native@latest init <MyApp>

TIP

• 已废弃, 推荐使用 npx @react-native-community/cli@latest init
• 默认使用 npm 安装依赖
• 不推荐使用 pnpm 安装和管理依赖, 会遗漏 @react-native-community 相关的子包:
  • @react-native-community/cli
  • @react-native-community/cli-platform-android
  • @react-native-community/cli-platform-ios

开发调试:

# 启动 metro 服务, 默认端口为 8081
# 端口号由以下表达式确定
# process.env.RCT_METRO_PORT || 8081
npm start

# 清除缓存
npm start --reset-cache
npm start --resetCache

TIP

• 可在浏览器中输入 localhost:8081 以检查 metro 服务是否正常启动
• 更改端口: npm start --port=1234
• npm start 终端中输入以下字符可执行相应命令:
  • a 运行到 android
  • i 运行到 iOS
  • d 打开调试
  • r 重新加载 :::

使用 CocoaPods 安装 iOS 依赖:

cd ios
pod install

重命名项目

npx react-native rename <new name>

真机上报错 Could not connect to development server

在电脑终端 (新终端, 非 npm start 终端) 中使用 adb 命令打开 Dev Menu (React Native Dev Menu (Bridge)):

adb shell input keyevent 82

在 Debugging 下找到并点击 Debug server host & port for device, 输入电脑 ip 和 port, 如 10.66.62.166:8081

TIP

• 安卓真机也可摇晃设备以打开 Dev Menu, 如不成功则在电脑终端中输入 adb shell input keyevent 82
• Windows 在终端输入 ipconfig 查看 ip
• MacOS 在终端输入 ifconfig 找到 en0 查看ip 或直接输入 ifconfig en0
• port 即 npm start 对应的端口, 默认为 8081

打包

安卓打包:

cd android
./gradlew assembleRelease

TIP

./gradlew 之前的 ./ 不可省略, 但在 Windows CMD 命令行下须去掉 ./:

# on windows cmd
cd android
gradlew assembleRelease

最终的安卓打包产物路径为 android/app/build/outputs/apk/release/app-release.apk

清除缓存

npm start --rest-cache

# 如果提示
# error: unknown option '--rest-cache'
# (Did you mean --resetCache?)
npm start --resetCache

# 或定义命令 "start:clean": "react-native start --resetCache"
npm run start:clean

android:

cd android
./gradlew clean
# or on windows cmd
# gradlew clean

Web 支持

使用 React Native Community CLI 创建的项目默认仅支持 android 和 ios 平台, 即根目录下存在 android 和 ios 文件夹

TODO 添加 Web 支持

调试

Chrome DevTools

• 浏览器内输入 chrome://inspect
• 点击 Configure 按钮并输入 Dev Server 链接, 如 localhost:8081
• 点击 Remote Target -> Hermes Bridgeless React Native -> inspect 即可弹出调试工具

react-devtools

• react-devtools - npm

npx react-devtools

全局安装 react-devtools:

npm install -g react-devtools

TIP

react-devtools 基于 Electron 构建, 因此会下载 Electron 相关依赖, 请确保网络代理工具正常, 下载过程会较为漫长, 务必等待安装完成

使用以下命令打开 react-devtools:

npx react-devtools

会提示在模拟器上打开 Dev Menu, 随后可正常调试

Nativewind

• React Native CLI - Nativewind

安装依赖:

npm install nativewind
npm install --save-dev tailwindcss@3.3.2

生成 tailwind.consig.js 文件:

npx tailwindcss init

babel.config.js 文件配置 nativewind/babel 插件:

// babel.config.js
module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: ['nativewind/babel']
};

生成 tailwind.output.css:

npx tailwind -o tailwind.output.css

WARNING

NativeWind V4 以下版本须锁死 tailwind 版本为 3.3.2, 否则会报错

package.json 中配置 tailwind 版本 (去掉版本号前的任何修饰符, 如 ^/~):

{
  "devDependencies": {
    "tailwindcss": "3.3.2"
  }
}

react-native-dotenv

• react-native-dotenv - GitHub

npm install --save-dev react-native-dotenv

SVG 图片支持

react native 本身不支持 svg 格式图片, 可借助以下插件实现

react-native-svg-transformer

• react-native-svg-transformer

react-native-svg-transformer 使用 SVGR 这一工具将 SVG 图片转换为 React Components

安装依赖:

npm i react-native-svg
npm i react-native-svg-transformer -D

import Logo from './logo.svg';

export default function App() {
  return <Logo width={120} height={40} />;
}

react-native-svg

• react-native-svg

npm i react-native-svg

Router

• React Navigation
• React Native Navigation

配置路径别名

在 tsconfig.json 中配置 compilerOptions.paths:

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "strict": true,
    "paths": {
      "@components/*": ["./src/components/*"]
    }
  },
  "include": ["**/*.ts", "**/*.tsx"]
}

同时须安装和配置相关插件, 否则 babel无法识别 (尽管IDE 可识别并可正常跳转):

• babel-plugin-module-resolver
• babel-plugin-root-import

babel-plugin-module-resolver

npm install --save-dev babel-plugin-module-resolver

babel-plugin-root-import

npm install --save-dev babel-plugin-root-import

React Navigation

安装依赖:

npm install @react-navigation/native @react-navigation/native-stack

# for bare react native project
npm install react-native-screens react-native-safe-area-context

# for iOS
cd ios
pod install
cd ..

使用 NavigationContainer 包裹入口:

import {NavigationContainer} from '@react-navigation/native';

Expo Router

Expo Router 构建于 React Navigation 之上, 提供更丰富、更易用的基于文件的路由导航功能 但仅可在 Expo CLI 项目中使用, 无法在纯 React Native 项目中使用

如须在纯 React Native 项目使用 Expo Router, 可安装 Expo CLI

Async Storage

• Install - Async Storage

npm install @react-native-async-storage/async-storage

组件库

react-native-resuables

• react-native-resuables

react-native-resuables 是一款 shadcn/ui 组件库, 主要特点为:

• 无样式或少样式
• 可下载至本地, 易于改动和定制

create-react-native-app

• create-react-native-app

create-react-native-app 已不推荐使用, 官方建议使用相关脚手架开发 RN

Expo

• Expo

npx create-expo-app@latest

Ignite

• Ignite

npx ignite-cli@latest new <MyApp>

1

Contributors

why

Changelog

Last edited 2 minutes ago

View full history

da5df4d-feat: update