1396 lines
39 KiB
Markdown
1396 lines
39 KiB
Markdown
官网：https://expo.dev/
|
||
|
||
# 初始化项目
|
||
|
||
创建项目命令：
|
||
|
||
```bash
|
||
pnpm create expo-app@latest --template blank-typescript
|
||
```
|
||
|
||
[官网模板](https://docs.expo.dev/more/create-expo/)如下：
|
||
|
||
| 模板名称 | 描述 |
|
||
| ------------------------------------------------------------ | ------------------------------------------------------------ |
|
||
| [`default`](https://github.com/expo/expo/tree/main/templates/expo-template-default) | 默认模板，用于构建多页面应用。包含推荐工具，如 **Expo CLI**、**Expo Router** 路由库，并启用 **TypeScript** 配置。适合大多数应用。 |
|
||
| [`blank`](https://github.com/expo/expo/tree/main/templates/expo-template-blank) | 最简模板，仅安装最基本依赖，不包含导航配置。 |
|
||
| [`blank-typescript`](https://github.com/expo/expo/tree/main/templates/expo-template-blank-typescript) | 空白模板，但启用了 **TypeScript** 支持。 |
|
||
| [`tabs`](https://github.com/expo/expo/tree/main/templates/expo-template-tabs) | 启用基于文件的路由系统（Expo Router），并默认使用 **TypeScript**，适合多标签页结构的应用。 |
|
||
| [`bare-minimum`](https://github.com/expo/expo/tree/main/templates/expo-template-bare-minimum) | 带有原生目录（`android` 与 `ios`）的空白模板，创建时会自动运行 [`npx expo prebuild`](https://docs.expo.dev/workflow/prebuild)。适合需要直接修改原生代码的项目。 |
|
||
|
||
**启动项目：**
|
||
|
||
```bash
|
||
npx expo start
|
||
```
|
||
|
||
|
||
|
||
# 基础配置
|
||
|
||
## 生成基础文件
|
||
|
||
```bash
|
||
npx expo customize babel.config.js
|
||
npx expo customize metro.config.js
|
||
```
|
||
|
||
|
||
|
||
## 集成 [antfu-eslint](https://github.com/antfu/eslint-config)
|
||
|
||
可以使用快捷命令（推荐）：
|
||
|
||
```bash
|
||
pnpm dlx @antfu/eslint-config@latest
|
||
```
|
||
|
||
安装：
|
||
|
||
```bash
|
||
pnpm i -D eslint @antfu/eslint-config
|
||
```
|
||
|
||
新建 `eslint.config.mjs` 文件：
|
||
|
||
```js
|
||
import antfu from '@antfu/eslint-config'
|
||
|
||
export default antfu({
|
||
stylistic: {
|
||
indent: 2, // 缩进为 2 个空格（可选 4 或 'tab'）
|
||
quotes: 'single', // 使用单引号（可选 'double'）
|
||
},
|
||
rules: {
|
||
'unused-imports/no-unused-imports': 'warn',
|
||
'unused-imports/no-unused-vars': 'warn',
|
||
'@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告
|
||
'no-console': 'off', // 关闭 console 报错
|
||
},
|
||
})
|
||
```
|
||
|
||
配置 vscode 模板，修改 `.vscode/settings.json` ：
|
||
|
||
> 注意安装 eslint 插件
|
||
|
||
```json
|
||
{
|
||
// Disable the default formatter, use eslint instead
|
||
"prettier.enable": false,
|
||
"editor.formatOnSave": false,
|
||
|
||
// Auto fix
|
||
"editor.codeActionsOnSave": {
|
||
"source.fixAll.eslint": "explicit",
|
||
"source.organizeImports": "never"
|
||
},
|
||
|
||
// Silent the stylistic rules in you IDE, but still auto fix them
|
||
"eslint.rules.customizations": [
|
||
{ "rule": "style/*", "severity": "off", "fixable": true },
|
||
{ "rule": "format/*", "severity": "off", "fixable": true },
|
||
{ "rule": "*-indent", "severity": "off", "fixable": true },
|
||
{ "rule": "*-spacing", "severity": "off", "fixable": true },
|
||
{ "rule": "*-spaces", "severity": "off", "fixable": true },
|
||
{ "rule": "*-order", "severity": "off", "fixable": true },
|
||
{ "rule": "*-dangle", "severity": "off", "fixable": true },
|
||
{ "rule": "*-newline", "severity": "off", "fixable": true },
|
||
{ "rule": "*quotes", "severity": "off", "fixable": true },
|
||
{ "rule": "*semi", "severity": "off", "fixable": true }
|
||
],
|
||
|
||
// Enable eslint for all supported languages
|
||
"eslint.validate": [
|
||
"javascript",
|
||
"javascriptreact",
|
||
"typescript",
|
||
"typescriptreact",
|
||
"vue",
|
||
"html",
|
||
"markdown",
|
||
"json",
|
||
"jsonc",
|
||
"yaml",
|
||
"toml",
|
||
"xml",
|
||
"gql",
|
||
"graphql",
|
||
"astro",
|
||
"svelte",
|
||
"css",
|
||
"less",
|
||
"scss",
|
||
"pcss",
|
||
"postcss"
|
||
]
|
||
}
|
||
```
|
||
|
||
## 集成 [nativewind](https://www.nativewind.dev/v5/getting-started/installation)
|
||
|
||
直接参考官网：https://www.nativewind.dev/docs/getting-started/installation
|
||
|
||
1. 安装依赖
|
||
|
||
```bash
|
||
npx expo add nativewind react-native-reanimated react-native-safe-area-context
|
||
npx expo add tailwindcss@^3.4.17 -- --save-dev
|
||
```
|
||
|
||
2. 运行 `npx tailwindcss init` 生成 `tailwind.config.js` 文件，添加配置：
|
||
|
||
```js
|
||
/** @type {import('tailwindcss').Config} */
|
||
module.exports = {
|
||
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
|
||
content: ["./App.tsx", "./components/**/*.{js,jsx,ts,tsx}"],
|
||
presets: [require("nativewind/preset")],
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
plugins: [],
|
||
}
|
||
```
|
||
|
||
3. 创建 `global.css` 文件：
|
||
|
||
```css
|
||
@tailwind base;
|
||
@tailwind components;
|
||
@tailwind utilities;
|
||
```
|
||
|
||
注意在全局引入
|
||
|
||
4. 修改 `babel.config.js` 文件：
|
||
|
||
> 如果没有该文件，执行 `npx expo customize babel.config.js` 命令创建。
|
||
|
||
```js
|
||
module.exports = function (api) {
|
||
api.cache(true);
|
||
return {
|
||
presets: [
|
||
["babel-preset-expo", { jsxImportSource: "nativewind" }],
|
||
"nativewind/babel",
|
||
],
|
||
};
|
||
};
|
||
```
|
||
|
||
5. 修改 `metro.config.js` 文件：
|
||
|
||
> 如果没有该文件，执行 `npx expo customize metro.config.js` 命令创建。
|
||
|
||
```js
|
||
const { getDefaultConfig } = require("expo/metro-config");
|
||
const { withNativeWind } = require('nativewind/metro');
|
||
|
||
const config = getDefaultConfig(__dirname)
|
||
|
||
module.exports = withNativeWind(config, { input: './global.css' })
|
||
```
|
||
|
||
6. 新建 `src/types/nativewind-env.d.ts` 文件：
|
||
|
||
```ts
|
||
/// <reference types="nativewind/types" />
|
||
```
|
||
|
||
7. 安装 ` react-native-css-interop` ：
|
||
|
||
```bash
|
||
npx expo install react-native-css-interop
|
||
```
|
||
|
||
8. 检验是否生效
|
||
|
||
```tsx
|
||
import "./global.css"
|
||
import { Text, View } from "react-native";
|
||
|
||
export default function App() {
|
||
return (
|
||
<View className="flex-1 items-center justify-center bg-white">
|
||
<Text className="text-xl font-bold text-blue-500">
|
||
Welcome to Nativewind!
|
||
</Text>
|
||
</View>
|
||
);
|
||
}
|
||
```
|
||
|
||
如果不生效，记得修改 `tailwind.config.js` 的目标路径：
|
||
|
||
```js
|
||
/** @type {import('tailwindcss').Config} */
|
||
module.exports = {
|
||
// NOTE: Update this to include the paths to all files that contain Nativewind classes.
|
||
content: ["./src/app/_layout.tsx", "./src/components/**/*.{js,jsx,ts,tsx}"],
|
||
presets: [require("nativewind/preset")],
|
||
theme: {
|
||
extend: {},
|
||
},
|
||
plugins: [],
|
||
}
|
||
```
|
||
|
||
|
||
|
||
## 集成 [gluestack-ui](https://gluestack.io/ui/docs/home/getting-started/installation)
|
||
|
||
### 方式一：CLI
|
||
|
||
```bash
|
||
npx gluestack-ui init
|
||
```
|
||
|
||
|
||
|
||
### 方式二：Manual
|
||
|
||
**前置条件：**需要安装 `nativewind`
|
||
|
||
1. 安装依赖：
|
||
|
||
```bash
|
||
npx expo add @gluestack-ui/core @gluestack-ui/utils react-native-svg @gluestack/ui-next-adapter
|
||
```
|
||
|
||
2. 从 [github](https://github.com/gluestack/gluestack-ui/tree/main/src/components/ui/gluestack-ui-provider) 复制必须的组件到 `@/components/ui/gluestack-ui-provider`。
|
||
|
||
3. 修改 `tailwind.config.js` 文件：
|
||
|
||
```bash
|
||
/** @type {import('tailwindcss').Config} */
|
||
module.exports = {
|
||
darkMode: process.env.DARK_MODE ? process.env.DARK_MODE : 'class',
|
||
content: [
|
||
'./app/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||
'./components/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||
'./utils/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||
'./*.{html,js,jsx,ts,tsx,mdx}',
|
||
'./src/**/*.{html,js,jsx,ts,tsx,mdx}',
|
||
],
|
||
presets: [require('nativewind/preset')],
|
||
important: 'html',
|
||
safelist: [
|
||
{
|
||
pattern:
|
||
// eslint-disable-next-line regexp/no-dupe-disjunctions
|
||
/(bg|border|text|stroke|fill)-(primary|secondary|tertiary|error|success|warning|info|typography|outline|background|indicator)-(0|50|100|200|300|400|500|600|700|800|900|950|white|gray|black|error|warning|muted|success|info|light|dark|primary)/,
|
||
},
|
||
],
|
||
theme: {
|
||
extend: {
|
||
colors: {
|
||
primary: {
|
||
0: 'rgb(var(--color-primary-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-primary-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-primary-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-primary-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-primary-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-primary-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-primary-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-primary-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-primary-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-primary-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-primary-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-primary-950)/<alpha-value>)',
|
||
},
|
||
secondary: {
|
||
0: 'rgb(var(--color-secondary-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-secondary-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-secondary-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-secondary-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-secondary-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-secondary-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-secondary-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-secondary-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-secondary-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-secondary-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-secondary-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-secondary-950)/<alpha-value>)',
|
||
},
|
||
tertiary: {
|
||
50: 'rgb(var(--color-tertiary-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-tertiary-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-tertiary-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-tertiary-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-tertiary-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-tertiary-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-tertiary-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-tertiary-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-tertiary-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-tertiary-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-tertiary-950)/<alpha-value>)',
|
||
},
|
||
error: {
|
||
0: 'rgb(var(--color-error-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-error-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-error-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-error-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-error-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-error-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-error-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-error-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-error-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-error-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-error-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-error-950)/<alpha-value>)',
|
||
},
|
||
success: {
|
||
0: 'rgb(var(--color-success-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-success-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-success-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-success-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-success-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-success-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-success-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-success-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-success-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-success-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-success-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-success-950)/<alpha-value>)',
|
||
},
|
||
warning: {
|
||
0: 'rgb(var(--color-warning-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-warning-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-warning-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-warning-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-warning-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-warning-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-warning-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-warning-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-warning-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-warning-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-warning-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-warning-950)/<alpha-value>)',
|
||
},
|
||
info: {
|
||
0: 'rgb(var(--color-info-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-info-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-info-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-info-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-info-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-info-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-info-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-info-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-info-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-info-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-info-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-info-950)/<alpha-value>)',
|
||
},
|
||
typography: {
|
||
0: 'rgb(var(--color-typography-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-typography-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-typography-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-typography-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-typography-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-typography-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-typography-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-typography-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-typography-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-typography-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-typography-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-typography-950)/<alpha-value>)',
|
||
white: '#FFFFFF',
|
||
gray: '#D4D4D4',
|
||
black: '#181718',
|
||
},
|
||
outline: {
|
||
0: 'rgb(var(--color-outline-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-outline-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-outline-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-outline-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-outline-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-outline-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-outline-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-outline-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-outline-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-outline-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-outline-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-outline-950)/<alpha-value>)',
|
||
},
|
||
background: {
|
||
0: 'rgb(var(--color-background-0)/<alpha-value>)',
|
||
50: 'rgb(var(--color-background-50)/<alpha-value>)',
|
||
100: 'rgb(var(--color-background-100)/<alpha-value>)',
|
||
200: 'rgb(var(--color-background-200)/<alpha-value>)',
|
||
300: 'rgb(var(--color-background-300)/<alpha-value>)',
|
||
400: 'rgb(var(--color-background-400)/<alpha-value>)',
|
||
500: 'rgb(var(--color-background-500)/<alpha-value>)',
|
||
600: 'rgb(var(--color-background-600)/<alpha-value>)',
|
||
700: 'rgb(var(--color-background-700)/<alpha-value>)',
|
||
800: 'rgb(var(--color-background-800)/<alpha-value>)',
|
||
900: 'rgb(var(--color-background-900)/<alpha-value>)',
|
||
950: 'rgb(var(--color-background-950)/<alpha-value>)',
|
||
error: 'rgb(var(--color-background-error)/<alpha-value>)',
|
||
warning: 'rgb(var(--color-background-warning)/<alpha-value>)',
|
||
muted: 'rgb(var(--color-background-muted)/<alpha-value>)',
|
||
success: 'rgb(var(--color-background-success)/<alpha-value>)',
|
||
info: 'rgb(var(--color-background-info)/<alpha-value>)',
|
||
light: '#FBFBFB',
|
||
dark: '#181719',
|
||
},
|
||
indicator: {
|
||
primary: 'rgb(var(--color-indicator-primary)/<alpha-value>)',
|
||
info: 'rgb(var(--color-indicator-info)/<alpha-value>)',
|
||
error: 'rgb(var(--color-indicator-error)/<alpha-value>)',
|
||
},
|
||
},
|
||
fontFamily: {
|
||
'heading': undefined,
|
||
'body': undefined,
|
||
'mono': undefined,
|
||
'jakarta': ['var(--font-plus-jakarta-sans)'],
|
||
'roboto': ['var(--font-roboto)'],
|
||
'code': ['var(--font-source-code-pro)'],
|
||
'inter': ['var(--font-inter)'],
|
||
'space-mono': ['var(--font-space-mono)'],
|
||
},
|
||
fontWeight: {
|
||
extrablack: '950',
|
||
},
|
||
fontSize: {
|
||
'2xs': '10px',
|
||
},
|
||
boxShadow: {
|
||
'hard-1': '-2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
||
'hard-2': '0px 3px 10px 0px rgba(38, 38, 38, 0.20)',
|
||
'hard-3': '2px 2px 8px 0px rgba(38, 38, 38, 0.20)',
|
||
'hard-4': '0px -3px 10px 0px rgba(38, 38, 38, 0.20)',
|
||
'hard-5': '0px 2px 10px 0px rgba(38, 38, 38, 0.10)',
|
||
'soft-1': '0px 0px 10px rgba(38, 38, 38, 0.1)',
|
||
'soft-2': '0px 0px 20px rgba(38, 38, 38, 0.2)',
|
||
'soft-3': '0px 0px 30px rgba(38, 38, 38, 0.1)',
|
||
'soft-4': '0px 0px 40px rgba(38, 38, 38, 0.1)',
|
||
},
|
||
},
|
||
},
|
||
}
|
||
|
||
```
|
||
|
||
4. 使用 `GluestackUIProvider` 包括着整个组件：
|
||
|
||
```tsx
|
||
// App.tsx
|
||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider';
|
||
import '@/global.css'; // Make sure this path is correct
|
||
|
||
export default function App() {
|
||
return (
|
||
<GluestackUIProvider>{/* Add your app code here */}</GluestackUIProvider>
|
||
);
|
||
}
|
||
```
|
||
|
||
|
||
|
||
### 安装组件测试
|
||
|
||
下载对应组件：
|
||
|
||
```bash
|
||
npx gluestack-ui add button
|
||
```
|
||
|
||
引入使用：
|
||
|
||
```tsx
|
||
import { StyleSheet, Text, View } from 'react-native'
|
||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||
import { Button, ButtonText } from '@/components/ui/button'
|
||
import { GluestackUIProvider } from '@/components/ui/gluestack-ui-provider'
|
||
import '@/styles/global.css'
|
||
|
||
export default function Layout() {
|
||
return (
|
||
<GluestackUIProvider>
|
||
<SafeAreaView style={styles.container}>
|
||
<View className="flex-1 items-center justify-center bg-white">
|
||
<Text className="text-xl font-bold text-blue-500">
|
||
Welcome to Nativewind!
|
||
</Text>
|
||
<Button>
|
||
<ButtonText>你好</ButtonText>
|
||
</Button>
|
||
</View>
|
||
</SafeAreaView>
|
||
</GluestackUIProvider>
|
||
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#f5f5f5',
|
||
paddingHorizontal: 16,
|
||
}
|
||
})
|
||
|
||
```
|
||
|
||
|
||
|
||
## 集成[@expo/vector-icons](https://docs.expo.dev/guides/icons/#expovector-icons)
|
||
|
||
图标网站地址：https://icons.expo.fyi/Index
|
||
|
||
该插件默认跟着expo安装了。可以直接使用，如果没有的话，则执行命令安装：
|
||
|
||
```
|
||
npx expo install @expo/vector-icons
|
||
```
|
||
|
||
测试：
|
||
|
||
```tsx
|
||
import { View, StyleSheet } from 'react-native';
|
||
import Ionicons from '@expo/vector-icons/Ionicons';
|
||
|
||
export default function App() {
|
||
return (
|
||
<View style={styles.container}>
|
||
<Ionicons name="checkmark-circle" size={32} color="green" />
|
||
</View>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
});
|
||
```
|
||
|
||
|
||
|
||
如果需要没有想要的图标，可以用下面的方式：
|
||
|
||
安装 `svg` 依赖
|
||
|
||
```bash
|
||
npx expo install react-native-svg
|
||
```
|
||
|
||
|
||
|
||
然后在components下面创建一个 `Icons.tsx` 文件，用来管理所有的图标
|
||
|
||
```tsx
|
||
import Svg, { Circle, Rect, Path } from 'react-native-svg';
|
||
|
||
interface IconProps {
|
||
size?: string | number;
|
||
color?: string;
|
||
}
|
||
|
||
// 测试图标
|
||
export const DemoIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ...rest }) => {
|
||
return (
|
||
<Svg height="50%" width="50%" viewBox="0 0 100 100" {...rest}>
|
||
<Circle cx="50" cy="50" r="45" stroke="blue" strokeWidth="2.5" fill="green" />
|
||
<Rect x="15" y="15" width={size} height={size} stroke="red" strokeWidth="2" fill="yellow" />
|
||
</Svg>
|
||
);
|
||
}
|
||
|
||
// 招聘
|
||
export const ZhaoPinIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ...rest }) => {
|
||
return (
|
||
<Svg viewBox="0 0 1024 1024" p-id="5316" width={size} height={size} {...rest}>
|
||
<Path d="M473.6 732.8c-9.6 0-25.6 3.2-48 6.4v112h-83.2v-102.4c-73.6 9.6-150.4 19.2-172.8 22.4L160 681.6c9.6-3.2 22.4-3.2 41.6-6.4V278.4h-19.2V188.8h272v89.6h-28.8v368c19.2-3.2 28.8-3.2 38.4-6.4l3.2 48 6.4 44.8zM288 278.4v70.4h51.2V278.4H288z m0 224h51.2v-67.2H288v67.2z m51.2 153.6v-67.2H288v73.6l51.2-6.4z m259.2-54.4l-3.2 25.6h220.8c0 9.6-9.6 112-12.8 131.2-6.4 76.8-32 89.6-121.6 99.2l-54.4 6.4-25.6-86.4 64-3.2c41.6-3.2 54.4-6.4 57.6-35.2 3.2-9.6 3.2-19.2 3.2-32h-233.6l16-102.4H448v-73.6h416v73.6l-265.6-3.2z m233.6-99.2H467.2V211.2H608V160l80 3.2v48H832v291.2zM547.2 288v32H608V288h-60.8z m0 140.8H608v-32h-60.8v32zM688 288v32h60.8V288h-60.8z m60.8 140.8v-32h-60.8v32h60.8z" p-id="5317" fill={color} />
|
||
</Svg>
|
||
);
|
||
}
|
||
```
|
||
|
||
## 集成[lucide](https://lucide.dev/icons/)
|
||
|
||
```
|
||
npx expo add lucide-react-native
|
||
```
|
||
|
||
|
||
|
||
|
||
|
||
## 集成[expo-router](expo-router)
|
||
|
||
1. 安装相关依赖
|
||
|
||
```bash
|
||
npx expo add expo-router react-native-safe-area-context react-native-screens expo-linking expo-constants expo-status-bar
|
||
```
|
||
|
||
2. 修改 `package.json`
|
||
|
||
```
|
||
{
|
||
"main": "expo-router/entry"
|
||
}
|
||
```
|
||
|
||
3. 将根目录的 `App.tsx` 和 `index.ts` 文件删除，新增 `_layout.tsx` 文件
|
||
|
||
### 布局
|
||
|
||
1. 新建 `app/_layout.tsx` 文件：
|
||
|
||
```tsx
|
||
import { Slot } from 'expo-router'
|
||
import { StyleSheet, Text } from 'react-native'
|
||
import { SafeAreaView } from 'react-native-safe-area-context'
|
||
|
||
export default function Layout() {
|
||
return (
|
||
<SafeAreaView style={styles.container}>
|
||
<Text style={styles.header}>Header</Text>
|
||
|
||
<Slot />
|
||
|
||
<Text style={styles.footer}>Footer</Text>
|
||
</SafeAreaView>
|
||
)
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
container: {
|
||
flex: 1,
|
||
backgroundColor: '#f5f5f5',
|
||
paddingHorizontal: 16,
|
||
},
|
||
header: {
|
||
fontSize: 20,
|
||
fontWeight: 'bold',
|
||
paddingVertical: 12,
|
||
textAlign: 'center',
|
||
backgroundColor: '#4f46e5',
|
||
color: '#fff',
|
||
borderRadius: 8,
|
||
marginVertical: 8,
|
||
},
|
||
footer: {
|
||
fontSize: 16,
|
||
paddingVertical: 10,
|
||
textAlign: 'center',
|
||
backgroundColor: '#e5e7eb',
|
||
borderRadius: 8,
|
||
marginVertical: 8,
|
||
},
|
||
})
|
||
```
|
||
|
||
2. 新建
|
||
|
||
|
||
|
||
## 集成 [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native)
|
||
|
||
安装依赖：
|
||
|
||
```bash
|
||
npx expo install lottie-react-native
|
||
```
|
||
|
||
使用案例：
|
||
|
||
```tsx
|
||
import React from "react";
|
||
import LottieView from "lottie-react-native";
|
||
|
||
export default function Animation() {
|
||
return (
|
||
<LottieView
|
||
source={require("../path/to/animation.json")}
|
||
style={{width: "100%", height: "100%"}}
|
||
autoPlay
|
||
loop
|
||
/>
|
||
);
|
||
}
|
||
```
|
||
|
||
lottie例子网站：https://lottiefiles.com/free-animations
|
||
|
||
|
||
|
||
## 集成zustand和@react-native-async-storage
|
||
|
||
安装依赖：
|
||
|
||
```bash
|
||
npx expo add zustand
|
||
npx expo add @react-native-async-storage/async-storage
|
||
```
|
||
|
||
使用demo：
|
||
```ts
|
||
// store/userStore.ts
|
||
import AsyncStorage from '@react-native-async-storage/async-storage'
|
||
import { create } from 'zustand'
|
||
import { createJSONStorage, persist } from 'zustand/middleware'
|
||
|
||
interface UserState {
|
||
userInfo: { userId: string, username: string } | null
|
||
token: string | null
|
||
setUserInfo: (userInfo: UserState['userInfo']) => void
|
||
setToken: (token: string) => void
|
||
logout: () => void
|
||
}
|
||
|
||
export const useUserStore = create<UserState>()(
|
||
persist(
|
||
(set, get) => ({
|
||
userInfo: null,
|
||
token: null,
|
||
setUserInfo: userInfo => set({ userInfo }),
|
||
setToken: token => set({ token }),
|
||
logout: () => {
|
||
console.log('当前 token:', get().token) // 使用 get 获取最新状态
|
||
set({ userInfo: null, token: null })
|
||
},
|
||
}),
|
||
{
|
||
name: 'user-storage', // 存储在 AsyncStorage 的 key
|
||
storage: createJSONStorage(() => AsyncStorage),
|
||
},
|
||
),
|
||
)
|
||
```
|
||
|
||
```tsx
|
||
// App.tsx
|
||
import React, { useEffect } from 'react'
|
||
import { Button, Text, View } from 'react-native'
|
||
import { useUserStore } from '@/store/userStore'
|
||
|
||
export default function App() {
|
||
const { userInfo, token, setUserInfo, setToken, logout } = useUserStore()
|
||
|
||
// 模拟 App 启动后读取状态
|
||
useEffect(() => {
|
||
console.log('用户信息:', userInfo)
|
||
console.log('Token:', token)
|
||
}, [userInfo, token])
|
||
|
||
return (
|
||
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
|
||
<Text>
|
||
User Info:
|
||
{userInfo ? userInfo.username : '未登录'}
|
||
</Text>
|
||
<Text>
|
||
Token:
|
||
{token || '无'}
|
||
</Text>
|
||
|
||
<Button
|
||
title="登录"
|
||
onPress={() => {
|
||
setUserInfo({ userId: '1', username: '张三' })
|
||
setToken('abc123')
|
||
}}
|
||
/>
|
||
|
||
<Button
|
||
title="退出登录"
|
||
onPress={() => {
|
||
logout()
|
||
}}
|
||
/>
|
||
</View>
|
||
)
|
||
}
|
||
```
|
||
|
||
|
||
|
||
## 集成moti
|
||
|
||
```bash
|
||
npx expo add moti
|
||
npx expo add react-native-reanimated react-native-gesture-handler
|
||
npx expo add react-native-gesture-handler
|
||
```
|
||
|
||
引入：
|
||
|
||
```ts
|
||
import 'react-native-reanimated'
|
||
import 'react-native-gesture-handler'
|
||
```
|
||
|
||
|
||
|
||
## 集成[react-native-iconfont-cli](https://github.com/iconfont-cli/react-native-iconfont-cli)
|
||
|
||
安装：
|
||
|
||
```bash
|
||
pnpm add react-native-iconfont-cli -D
|
||
```
|
||
|
||
BUG位置：https://github.com/iconfont-cli/react-native-iconfont-cli/issues/42
|
||
|
||
解决fang'an修改模板 `node_modules/react-native-iconfont-cli/templates/SingleIcon.tsx.template`：
|
||
|
||
```tsx
|
||
/* eslint-disable */
|
||
/* tslint:disable */
|
||
|
||
import React from 'react';
|
||
import type { FunctionComponent } from 'react';
|
||
import type { ViewProps } from 'react-native';
|
||
#svgComponents#
|
||
#helper#
|
||
|
||
interface Props extends Omit<GProps, 'color'>, ViewProps {
|
||
size?: number;
|
||
color?: string | string[];
|
||
}
|
||
|
||
const #componentName#: FunctionComponent<Props> = ({
|
||
size = #size#,
|
||
color,
|
||
...rest
|
||
}) => {
|
||
return (
|
||
#iconContent#
|
||
);
|
||
};
|
||
|
||
export default React.memo(#componentName#);
|
||
```
|
||
|
||
生成图标命令：
|
||
|
||
```bash
|
||
npx iconfont-rn
|
||
```
|
||
|
||
|
||
|
||
## 配置深度链接
|
||
|
||
作用：通过链接就可以跳转到该app。
|
||
|
||
在 `app.json` 文件下进行配置：
|
||
|
||
```json
|
||
{
|
||
"expo": {
|
||
"scheme":"oneao",
|
||
}
|
||
}
|
||
```
|
||
|
||
然后就可以通过这个配置 从别的应用或者浏览器跳转到你的app：
|
||
|
||
```
|
||
oneao://courses/react-native
|
||
```
|
||
|
||
|
||
|
||
## [定义 src 路径别名 @](https://docs.expo.dev/guides/typescript/)
|
||
|
||
修改 `tsconfig.json` 文件：
|
||
|
||
```json
|
||
{
|
||
"extends": "expo/tsconfig.base",
|
||
"compilerOptions": {
|
||
"baseUrl": "./",
|
||
"paths": {
|
||
"@/*": ["src/*"]
|
||
},
|
||
"strict": true
|
||
}
|
||
}
|
||
```
|
||
|
||
安装 `module-resolver` ：
|
||
|
||
```
|
||
pnpm add -D babel-plugin-module-resolver
|
||
```
|
||
|
||
修改 `babel.config.js` ：
|
||
|
||
```js
|
||
module.exports = function (api) {
|
||
api.cache(true)
|
||
return {
|
||
presets: [
|
||
['babel-preset-expo', { jsxImportSource: 'nativewind' }],
|
||
'nativewind/babel',
|
||
],
|
||
plugins: [
|
||
[
|
||
'module-resolver',
|
||
{
|
||
root: ['./src'],
|
||
alias: {
|
||
'@': './src',
|
||
},
|
||
},
|
||
],
|
||
],
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
# 打包
|
||
|
||
## 云打包
|
||
|
||
1. 安装 EAS CLI
|
||
|
||
```bash
|
||
npm install -g eas-cli
|
||
```
|
||
|
||
2. 注册并登录 Expo 账户
|
||
|
||
- 访问 https://expo.dev/ 注册账户，然后命令行登录：
|
||
|
||
```bash
|
||
expo login
|
||
```
|
||
|
||
3. 配置项目构建
|
||
|
||
- 输入以下命令，选择 Android 平台即可。
|
||
|
||
```bash
|
||
eas build:configure
|
||
```
|
||
|
||
4. 构建 Android 包
|
||
|
||
- 默认构建 AAB 包（上传 Google Play）：
|
||
|
||
```bash
|
||
eas build --platform android
|
||
```
|
||
|
||
- 构建 APK（可直接安装）：
|
||
|
||
```bash
|
||
eas build -p android --profile preview
|
||
```
|
||
|
||
|
||
|
||
## 本地打包（EAS方式）
|
||
|
||
|
||
|
||
|
||
|
||
## 本地打包（原生方式）
|
||
|
||
### 1. 安装 [Android Studio]( https://developer.android.com/?hl=zh-cn)
|
||
|
||
1. 下载安装
|
||
|
||
- 按照官网提示依次安装 SDK 工具和必要组件。
|
||
|
||
- 安装完成后，记住 SDK 的安装路径（例如：`D:\data\sdk`，默认位置是：`C:\Users\<你的用户名>\AppData\Local\Android\Sdk`），后续需要用到。
|
||
|
||
2. 配置环境变量
|
||
|
||
- 打开 **系统属性 → 高级 → 环境变量**。
|
||
|
||
- 在 **系统变量** 中新增：
|
||
|
||
```
|
||
变量名：ANDROID_HOME
|
||
变量值：D:\data\sdk
|
||
```
|
||
|
||
- 在 **Path** 中新增：
|
||
|
||
```bash
|
||
%ANDROID_HOME%\platform-tools
|
||
%ANDROID_HOME%\tools
|
||
%ANDROID_HOME%\tools\bin
|
||
```
|
||
|
||
- 保存设置。
|
||
|
||
3. 验证安装
|
||
|
||
- 打开命令行，执行：
|
||
|
||
```
|
||
echo %ANDROID_HOME%
|
||
```
|
||
|
||
- 如果输出 SDK 路径，则说明配置成功。
|
||
|
||
|
||
|
||
### 2. 安装 [jdk17](https://adoptium.net/zh-CN/temurin/releases?version=8&os=any&arch=any)
|
||
|
||
1. 下载安装
|
||
|
||
- 下载对应版本解压即可。
|
||
- 安装成功后，记住 jdk 的安装路径，后续需要用到。
|
||
|
||
2. 配置环境变量
|
||
|
||
- 打开 **系统属性 → 高级 → 环境变量**。
|
||
|
||
- 在 **系统变量** 中新增：
|
||
|
||
```bash
|
||
变量名：JAVA_HOME
|
||
变量值：D:\devtool\jdk\jdk-17.0.16+8
|
||
```
|
||
|
||
- 在 **Path** 中新增：
|
||
|
||
```bash
|
||
%JAVA_HOME%\bin
|
||
```
|
||
|
||
- 保存设置。
|
||
|
||
3. 验证安装
|
||
|
||
- 打开命令行，执行：
|
||
|
||
```bash
|
||
java --version
|
||
```
|
||
|
||
- 如果输出 jdk 的信息，则说明配置成功。
|
||
|
||
|
||
|
||
### 3. Expo 项目启用 [Prebuild](https://docs.expo.dev/workflow/prebuild/)
|
||
|
||
1. 生成原生项目
|
||
|
||
```bash
|
||
npx expo prebuild
|
||
```
|
||
|
||
然后执行完毕后，会生成 `android` 目录。
|
||
|
||
2. 清除并重新生成原生项目
|
||
|
||
```bash
|
||
npx expo prebuild --clean
|
||
```
|
||
|
||
会删除已有的 `android` 和 `ios` 目录，然后重新生成。
|
||
|
||
|
||
|
||
### 4. 配置 Keystore
|
||
|
||
#### 4.1 生成密钥
|
||
|
||
```bash
|
||
keytool -genkey -v -keystore android-release.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000
|
||
```
|
||
|
||
说明：
|
||
|
||
- `my-release-key.keystore`：生成的密钥文件名，可自定义路径
|
||
- `my-key-alias`：密钥别名
|
||
- `RSA`：加密算法
|
||
- `2048`：密钥长度
|
||
- `10000`：有效期（天）
|
||
|
||
#### 4.2 手动配置
|
||
|
||
修改 `android/app/build.gradle` 文件
|
||
|
||
1. 修改 `signingConfigs`
|
||
|
||
```bash
|
||
signingConfigs {
|
||
release {
|
||
storeFile file('android-release.keystore') // keystore 文件路径
|
||
storePassword '你的Keystore密码' // keystore 密码
|
||
keyAlias '你的KeyAlias' // 密钥别名
|
||
keyPassword '你的Key密码' // key 密码
|
||
}
|
||
|
||
debug {
|
||
storeFile file('debug.keystore')
|
||
storePassword 'android'
|
||
keyAlias 'androiddebugkey'
|
||
keyPassword 'android'
|
||
}
|
||
}
|
||
```
|
||
|
||
2. 在 `buildTypes` 中设置 release 使用 release 签名
|
||
|
||
```bash
|
||
buildTypes {
|
||
release {
|
||
signingConfig signingConfigs.release
|
||
}
|
||
|
||
debug {
|
||
signingConfig signingConfigs.debug
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
#### 4.3 脚本配置（推荐）
|
||
|
||
1. 在 expo 项目根目录下新增 `plugins\withAndroidSignature.js` 文件，内容如下：
|
||
|
||
```js
|
||
// plugins/withAndroidSignature.js
|
||
|
||
const { withAppBuildGradle } = require("@expo/config-plugins");
|
||
const fs = require("fs");
|
||
const path = require("path");
|
||
|
||
module.exports = function withAndroidSignature(config) {
|
||
return withAppBuildGradle(config, config => {
|
||
if (config.modResults.language === "groovy") {
|
||
config.modResults.contents = setAndroidSignature(config.modResults.contents);
|
||
} else {
|
||
throw new Error("如果不是 groovy，则无法在 app/build.gradle 中设置 signingConfigs");
|
||
}
|
||
return config;
|
||
});
|
||
};
|
||
|
||
function setAndroidSignature(appBuildGradle) {
|
||
if (!fs.existsSync(path.resolve(__dirname, "../credentials.json"))) {
|
||
console.warn("警告：没有设置正式版本的 Android Keystore 文件，因为 credentials.json 不存在。");
|
||
return appBuildGradle;
|
||
}
|
||
const info = JSON.parse(fs.readFileSync(path.resolve(__dirname, "../credentials/credentials.json"), { encoding: "utf8" }));
|
||
|
||
// 使用正则表达式插入签名信息
|
||
let output = appBuildGradle.replace(
|
||
/(signingConfigs\s*\{)/,
|
||
`$1
|
||
release {
|
||
storeFile file(${JSON.stringify(path.resolve(__dirname, "../credentials/android-release.keystore"))})
|
||
storePassword ${JSON.stringify(info.android.keystore.keystorePassword)}
|
||
keyAlias ${JSON.stringify(info.android.keystore.keyAlias)}
|
||
keyPassword ${JSON.stringify(info.android.keystore.keyPassword)}
|
||
}`,
|
||
);
|
||
|
||
// 使用正则表达式替换 signingConfig
|
||
output = output.replace(
|
||
/(release\s*\{)[^}]*?signingConfig\s+signingConfigs\.debug/s,
|
||
`$1
|
||
signingConfig signingConfigs.release
|
||
`,
|
||
);
|
||
|
||
return output;
|
||
}
|
||
```
|
||
|
||
2. 在 expo 项目根目录下新增 `/credentials/credentials.json` 文件（该文件主要是 Keystore 的信息）：
|
||
|
||
```json
|
||
{
|
||
"android": {
|
||
"keystore": {
|
||
"keystorePath": "credentials/android-release.keystore", // Android keystore 文件路径
|
||
"keystorePassword": "123456", // keystore 密码
|
||
"keyAlias": "my-key-alias", // Key 别名
|
||
"keyPassword": "123456" // Key 密码
|
||
}
|
||
},
|
||
"ios": {
|
||
"provisioningProfilePath": "ios/certs/profile.mobileprovision", // iOS 描述文件路径
|
||
"distributionCertificate": {
|
||
"path": "ios/certs/dist-cert.p12", // iOS 分发证书路径
|
||
"password": "password" // 证书密码
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
3. 在 `app.json` 中指定这个项目级插件：
|
||
|
||
```json
|
||
{
|
||
"expo": {
|
||
"plugins": [
|
||
"./plugins/withAndroidSignature"
|
||
]
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
|
||
### 5. 打包
|
||
|
||
- 编译成 Google Play 商店用的 .aab 文件
|
||
|
||
```bash
|
||
./gradlew bundleRelease
|
||
```
|
||
|
||
- 直接安装的 .apk 文件
|
||
|
||
```bash
|
||
./gradlew assembleRelease
|
||
```
|
||
|
||
**注意：**这个时候可能会下载 `gradle` 、`apk` 等资源，网络速度可能过慢。
|
||
|
||
**解决方法：**在 `android/gradle.properties` 添加网络代理：
|
||
|
||
```bash
|
||
systemProp.http.proxyHost=127.0.0.1
|
||
systemProp.http.proxyPort=7890
|
||
systemProp.https.proxyHost=127.0.0.1
|
||
systemProp.https.proxyPort=7890
|
||
```
|
||
|
||
打包结果在 `android/app/build/outputs/apt/release` 包下。
|
||
|
||
|
||
|
||
# 打包体积优化
|
||
|
||
默认初始项目打包就有 **80MB** 左右，是因为 expo 默认将 armeabi-v7a、arm64-v8a、x86、x86_64 这些架构的包都打包进来了。
|
||
|
||
| 架构名称 | 位数 | 设备类型 | 应用场景 | 备注 |
|
||
| --------------- | ----- | ------------------------------------------ | -------------- | ------------------------------------ |
|
||
| **armeabi-v7a** | 32 位 | 老旧的 ARM 芯片手机（如部分安卓 5/6 设备） | 兼容旧设备 | 已逐渐被淘汰，但仍有少数旧机型使用 |
|
||
| **arm64-v8a** | 64 位 | 主流安卓手机（大多数真机） | ✅ 主力目标平台 | 目前最主流、性能最佳的架构 |
|
||
| **x86** | 32 位 | 早期安卓模拟器（Intel 架构） | 开发调试 | 真机几乎不会用 |
|
||
| **x86_64** | 64 位 | 现代安卓模拟器 | 开发调试 | 用于 Android Studio 模拟器或测试环境 |
|
||
|
||
## 方法1（简单）
|
||
|
||
找到 `android/gradle.properties` 文件，找到 `reactNativeArchitectures` ，根据需要删除即可
|
||
|
||
```properties
|
||
reactNativeArchitectures=armeabi-v7a,arm64-v8a,x86,x86_64
|
||
```
|
||
|
||
## 方法2（原生方法 选择更多）
|
||
|
||
在 `android/app/build.gradle` 文件中添加或修改以下配置：
|
||
|
||
```
|
||
android {
|
||
// 其他配置...
|
||
|
||
splits {
|
||
abi {
|
||
enable true // 启用按 CPU 架构拆分
|
||
reset() // 重置默认架构列表
|
||
include 'arm64-v8a', 'armeabi-v7a'
|
||
universalApk false // 是否生成包含所有架构的通用 APK（false 表示只生成分架构的独立包）
|
||
// 还有一个 exclude 配置是排除指定架构的
|
||
}
|
||
}
|
||
|
||
// 其他配置...
|
||
}
|
||
```
|
||
|
||
**说明：**
|
||
|
||
- `enable true`：启用架构拆分功能。
|
||
- `reset()`：清空默认的架构配置，避免重复。
|
||
- `include`：指定要生成的架构包，比如只打 `arm64-v8a` 和 `armeabi-v7a`。
|
||
- `universalApk false`：不生成通用包（即包含所有架构的 APK）。
|
||
|
||
**举例：**
|
||
|
||
执行打包命令后，将生成多个包，例如：
|
||
|
||
```
|
||
app-arm64-v8a-release.apk
|
||
app-armeabi-v7a-release.apk
|
||
```
|
||
|
||
每个 APK 只包含对应架构的二进制文件，体积更小。
|
||
|
||
如果把 `universalApk` 设置为 `true`，则只会生成一个：
|
||
|
||
```
|
||
app-universal-release.apk
|
||
```
|
||
|
||
这个包能在 `arm64-v8a` 和 `armeabi-v7a` 架构的设备上运行，但体积最大。
|
||
|
||
|
||
|
||
# 报错
|
||
|
||
## 检查依赖是否有误
|
||
|
||
```bash
|
||
npx expo-doctor
|
||
```
|
||
|
||
## Cannot find module 'react-native-worklets/plugin'
|
||
|
||
```bash
|
||
npx expo add react-native-worklets
|
||
```
|
||
|
||
## Filename longer than 260 characters
|
||
|
||
解决方法：
|
||
|
||
1️⃣ 启用 Windows 长路径支持
|
||
|
||
通过 **注册表**开启 Windows 对长路径（超过 260 字符）的支持：
|
||
|
||
- 路径：
|
||
|
||
```
|
||
HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem
|
||
```
|
||
|
||
- 键值：`LongPathsEnabled`
|
||
|
||
- 设置为 `1` 表示开启长路径支持。
|
||
|
||
✅ 作用：允许系统和应用使用超过 260 个字符的文件路径。
|
||
|
||
2️⃣ 替换 Ninja 版本
|
||
|
||
- 旧版本 Ninja（v1.10）在 Windows 下仍然可能受路径长度限制，导致构建 `.o` 文件失败。
|
||
- 下载新版 Ninja（v1.12+）并替换 Android SDK 自带的 Ninja：
|
||
|
||
旧路径（Android SDK 自带）：
|
||
|
||
```
|
||
C:\Users\<your-username>\AppData\Local\Android\Sdk\cmake\3.22.1\bin\ninja.exe
|
||
```
|
||
|
||
> 该路径可能不在这里，C盘这里是默认安装的，如果安装到其他位置的话，那么就换成具体的位置。
|
||
|
||
新 Ninja 下载地址：
|
||
👉 https://github.com/ninja-build/ninja/releases
|
||
|
||
替换后，Ninja 就可以处理更长的路径，不再报 “Filename longer than 260 characters” 错误。
|
||
|