u

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', ..
 
 
 
+
+
 # 打包
 
 ## 云打包