u

code/app/base-app/app.json

@@ -2,6 +2,7 @@
   "expo": {
     "name": "base-app",
     "slug": "base-app",
+    "scheme":"oneao",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -28,7 +29,8 @@
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "./plugins/withAndroidSignature.js"
+      "./plugins/withAndroidSignature.js",
+      "expo-router"
     ]
   }
 }

code/app/base-app/app/_layout.tsx

@@ -0,0 +1,28 @@
+import { Stack } from 'expo-router'
+import { StyleSheet } from 'react-native'
+
+export default function Layout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerTitleAlign: 'center',
+        animation: 'simple_push',
+      }}
+    >
+      <Stack.Screen
+        name="index"
+        options={{
+          headerShown: false, // 首页不显示 title
+        }}
+      />
+      {/* 其他页面可以在这里添加 */}
+    </Stack>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: 'black',
+  },
+})

code/app/base-app/eslint.config.js

@@ -2,17 +2,13 @@
 import antfu from '@antfu/eslint-config'
 
 export default antfu({
-  formatters: {
-    css: true, // 启用 CSS 格式化
-    html: true, // 启用 HTML 格式化
-    markdown: 'prettier', // Markdown 使用 Prettier 格式化
-  },
   stylistic: {
     indent: 2, // 缩进为 2 个空格（可选 4 或 'tab'）
     quotes: 'single', // 使用单引号（可选 'double'）
   },
   rules: {
-    'no-unused-vars': 'off', // 关闭未使用变量的报错
+    'unused-imports/no-unused-imports': 'warn',
+    'unused-imports/no-unused-vars': 'warn',
     '@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告
     'no-console': 'off', // 关闭 console 报错
   },

code/app/base-app/index.ts

@@ -1,8 +0,0 @@
-import { registerRootComponent } from 'expo'
-import App from './App'
-import '@/styles/global.css'
-
-// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
-// It also ensures that whether you load the app in Expo Go or in a native build,
-// the environment is set up appropriately
-registerRootComponent(App)

code/app/base-app/package.json

@@ -2,7 +2,7 @@
   "name": "base-app",
   "version": "1.0.0",
   "private": true,
-  "main": "index.ts",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start",
     "android": "expo run:android",
@@ -11,17 +11,21 @@
   },
   "dependencies": {
     "expo": "~54.0.18",
+    "expo-constants": "~18.0.10",
+    "expo-linking": "~8.0.8",
+    "expo-router": "~6.0.13",
     "expo-status-bar": "~3.0.8",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "react-native-reanimated": "^4.1.3",
-    "react-native-safe-area-context": "^5.6.1"
+    "react-native-safe-area-context": "~5.6.0",
+    "react-native-screens": "~4.16.0"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^6.0.0",
+    "@babel/core": "^7.28.4",
     "@types/react": "~19.1.0",
     "eslint": "^9.38.0",
-    "eslint-plugin-format": "^1.0.2",
     "typescript": "~5.9.2"
   }
 }

code/app/base-app/tsconfig.json

@@ -1,10 +1,14 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "jsx": "react-native",
+    "lib": ["esnext"],
     "baseUrl": "./",
     "paths": {
       "@/*": ["src/*"]
     },
     "strict": true
-  }
+  },
+  "include": ["./**/*.ts", "./**/*.tsx", "./**/*.vue", "src/types/auto-imports.d.ts"],
+  "exclude": ["node_modules", "dist"]
 }

notes/前端开发/react-native/expo.md

@@ -32,12 +32,10 @@ npx expo start
 
 ## 集成 [antfu-eslint](https://github.com/antfu/eslint-config)
 
-
-
 安装：
 
 ```bash
-pnpm i -D eslint @antfu/eslint-config eslint-plugin-format
+pnpm i -D eslint @antfu/eslint-config
 ```
 
 新建 `eslint.config.js` 文件：
@@ -47,11 +45,6 @@ pnpm i -D eslint @antfu/eslint-config eslint-plugin-format
 import antfu from '@antfu/eslint-config'
 
 export default antfu({
-  formatters: {
-    css: true, // 启用 CSS 格式化
-    html: true, // 启用 HTML 格式化
-    markdown: 'prettier', // Markdown 使用 Prettier 格式化
-  },
   stylistic: {
     indent: 2, // 缩进为 2 个空格（可选 4 或 'tab'）
     quotes: 'single', // 使用单引号（可选 'double'）
@@ -59,8 +52,10 @@ export default antfu({
   rules: {
     'no-unused-vars': 'off', // 关闭未使用变量的报错
     '@typescript-eslint/no-use-before-define': 'off', // 关闭 TS 的“定义前使用”警告
+    'no-console': 'off', // 关闭 console 报错
   },
 })
+
 ```
 
 配置 vscode 模板，修改 `.vscode/settings.json` ：
@@ -248,6 +243,98 @@ export const ZhaoPinIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ..
 }
 ```
 
+## 集成[expo-router](expo-router)
+
+1. 安装相关依赖
+
+   ```bash
+   npx expo install 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. 新建 
+
+
+
+## 配置深度链接
+
+作用：通过链接就可以跳转到该app。
+
+在 `app.json` 文件下进行配置：
+
+```json
+{
+  "expo": {
+    "scheme":"oneao",
+  }
+}
+```
+
+然后就可以通过这个配置 从别的应用或者浏览器跳转到你的app：
+
+```
+oneao://courses/react-native
+```
+
+
+
 ## [定义 src 路径别名 @](https://docs.expo.dev/guides/typescript/)
 
 修改 `tsconfig.json` 文件：
@@ -267,6 +354,8 @@ export const ZhaoPinIcon: React.FC<IconProps> = ({ size = 30, color = '#fff', ..
 
 
 
+
+
 # 打包
 
 ## 云打包