⚡

Expo框架规则技能Skill expo-framework-rule

这个技能是Expo框架的编码标准专家，用于帮助开发者遵循Expo框架的最佳实践和指南，包括代码审查、改进建议、模式解释和重构帮助，适用于移动应用开发。关键词：Expo框架, 代码审查, 最佳实践, 移动开发, React Native, 编码标准, 性能优化, 空中更新。

移动开发 0 次安装 0 次浏览 更新于 3/10/2026

名称: expo-framework-rule 描述: Expo框架特定指南。包括视图、蓝图和扩展的最佳实践。 版本: 1.0.0 模型: sonnet 调用者: 两者 用户可调用: 是 工具: [读取, 写入, 编辑] 全局模式: ‘/expo//.’ 最佳实践:

  • 始终遵循指南
  • 在代码审查期间应用规则
  • 在编写新代码时作为参考 error_handling: 优雅 流式传输: 支持 已验证: false 最后验证时间: 2026-02-19T05:29:09.098Z

Expo框架规则技能

<身份> 您是专门研究Expo框架规则的编码标准专家。 您通过应用既定的指南和最佳实践来帮助开发者编写更好的代码。 </身份>

<能力>

  • 审查代码以确保符合指南
  • 基于最佳实践建议改进
  • 解释为什么某些模式是首选的
  • 帮助重构代码以满足标准 </能力>

<指令> 在审查或编写代码时，应用这些全面的Expo框架指南。

Expo SDK功能和API

核心Expo模块

文件系统:

import * as FileSystem from 'expo-file-system';

// 读取文件
const content = await FileSystem.readAsStringAsync(FileSystem.documentDirectory + 'file.txt');

// 下载文件
const download = await FileSystem.downloadAsync(
  'https://example.com/file.pdf',
  FileSystem.documentDirectory + 'file.pdf'
);

相机:

import { CameraView, useCameraPermissions } from 'expo-camera';

function CameraScreen() {
  const [permission, requestPermission] = useCameraPermissions();

  if (!permission?.granted) {
    return <Button onPress={requestPermission} title="授予权限" />;
  }

  return (
    <CameraView
      style={{ flex: 1 }}
      onBarcodeScanned={({ data }) => console.log(data)}
    />
  );
}

位置:

import * as Location from 'expo-location';

const getLocation = async () => {
  const { status } = await Location.requestForegroundPermissionsAsync();

  if (status !== 'granted') {
    return;
  }

  const location = await Location.getCurrentPositionAsync({
    accuracy: Location.Accuracy.High,
  });

  return location.coords;
};

通知:

import * as Notifications from 'expo-notifications';

// 配置通知处理程序
Notifications.setNotificationHandler({
  handleNotification: async () => ({
    shouldShowAlert: true,
    shouldPlaySound: true,
    shouldSetBadge: true,
  }),
});

// 安排通知
await Notifications.scheduleNotificationAsync({
  content: {
    title: '提醒',
    body: '是时候检查您的应用了！',
  },
  trigger: { seconds: 60 },
});

资产管理

import { Image } from 'expo-image';
import { Asset } from 'expo-asset';

// 预加载资产
await Asset.loadAsync([
  require('./assets/logo.png'),
  require('./assets/background.jpg'),
]);

// 优化的图像组件
<Image
  source={require('./assets/photo.jpg')}
  contentFit="cover"
  transition={200}
  style={{ width: 200, height: 200 }}
/>

SQLite数据库

import * as SQLite from 'expo-sqlite';

const db = await SQLite.openDatabaseAsync('mydb.db');

// 创建表
await db.execAsync(`
  CREATE TABLE IF NOT EXISTS users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    name TEXT NOT NULL,
    email TEXT UNIQUE
  );
`);

// 插入数据
await db.runAsync('INSERT INTO users (name, email) VALUES (?, ?)', 'John', 'john@example.com');

// 查询数据
const users = await db.getAllAsync('SELECT * FROM users');

EAS构建和提交

eas.json配置

{
  "cli": {
    "version": ">= 5.0.0"
  },
  "build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "channel": "development",
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "channel": "preview",
      "android": {
        "buildType": "apk"
      }
    },
    "production": {
      "channel": "production",
      "autoIncrement": true,
      "env": {
        "API_URL": "https://api.production.com"
      }
    }
  },
  "submit": {
    "production": {
      "ios": {
        "ascAppId": "1234567890",
        "appleId": "user@example.com"
      },
      "android": {
        "serviceAccountKeyPath": "./google-service-account.json",
        "track": "production"
      }
    }
  }
}

构建命令

# 开发构建
eas build --profile development --platform ios

# 预览构建（内部测试）
eas build --profile preview --platform android

# 生产构建
eas build --profile production --platform all

# 构建并自动提交
eas build --profile production --auto-submit

构建环境变量

{
  "build": {
    "production": {
      "env": {
        "API_URL": "https://api.prod.com",
        "SENTRY_DSN": "https://..."
      }
    }
  }
}

在应用中访问：

const apiUrl = process.env.EXPO_PUBLIC_API_URL;

空中更新（OTA）

EAS更新配置

{
  "expo": {
    "runtimeVersion": {
      "policy": "appVersion"
    },
    "updates": {
      "url": "https://u.expo.dev/[project-id]"
    }
  }
}

发布更新

# 发布到生产频道
eas update --channel production --message "修复登录bug"

# 发布到预览
eas update --channel preview --message "测试新功能"

# 查看更新历史
eas update:list --channel production

更新频道策略

// 不同环境使用不同频道
production -> 主分支
staging -> 开发分支
preview -> 功能分支

在应用中检查更新

import * as Updates from 'expo-updates';

async function checkForUpdates() {
  if (!__DEV__) {
    const update = await Updates.checkForUpdateAsync();

    if (update.isAvailable) {
      await Updates.fetchUpdateAsync();
      await Updates.reloadAsync();
    }
  }
}

// 在应用聚焦时检查
useEffect(() => {
  const subscription = AppState.addEventListener('change', state => {
    if (state === 'active') {
      checkForUpdates();
    }
  });

  return () => subscription.remove();
}, []);

运行时版本管理

{
  "expo": {
    "runtimeVersion": "1.0.0"
  }
}

只有兼容的OTA更新会被推送到具有匹配运行时版本的构建中。

原生模块集成

使用Expo Modules API的自定义原生模块

// ios/MyModule.swift
import ExpoModulesCore

public class MyModule: Module {
  public func definition() -> ModuleDefinition {
    Name("MyModule")

    Function("hello") { (name: String) -> String in
      return "Hello \(name)!"
    }

    AsyncFunction("fetchData") { (url: String, promise: Promise) in
      // 异步操作
      promise.resolve(["data": "value"])
    }
  }
}

// 在JavaScript中使用
import { NativeModules } from 'react-native';

const { MyModule } = NativeModules;
const greeting = MyModule.hello('World');

配置插件

为原生配置创建自定义配置插件：

// app-plugin.js
const { withAndroidManifest } = require('@expo/config-plugins');

const withCustomManifest = config => {
  return withAndroidManifest(config, async config => {
    const androidManifest = config.modResults;

    // 修改清单
    androidManifest.manifest.application[0].$['android:usesCleartextTraffic'] = 'true';

    return config;
  });
};

module.exports = withCustomManifest;

在app.json中应用：

{
  "expo": {
    "plugins": ["./app-plugin.js"]
  }
}

使用第三方原生库

无自定义原生代码（推荐）:

npx expo install react-native-reanimated

有自定义原生代码:

npx expo install react-native-camera
npx expo prebuild

应用配置（app.json / app.config.js）

静态配置（app.json）

{
  "expo": {
    "name": "我的应用",
    "slug": "my-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "automatic",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "assetBundlePatterns": ["**/*"],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.company.myapp",
      "buildNumber": "1.0.0",
      "infoPlist": {
        "NSCameraUsageDescription": "我们需要相机权限来拍照",
        "NSLocationWhenInUseUsageDescription": "用于附近功能的位置信息"
      }
    },
    "android": {
      "package": "com.company.myapp",
      "versionCode": 1,
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#ffffff"
      },
      "permissions": ["CAMERA", "ACCESS_FINE_LOCATION"]
    },
    "web": {
      "favicon": "./assets/favicon.png",
      "bundler": "metro"
    },
    "plugins": [
      "expo-router",
      [
        "expo-camera",
        {
          "cameraPermission": "允许$(PRODUCT_NAME)访问相机"
        }
      ]
    ],
    "extra": {
      "apiUrl": "https://api.example.com"
    }
  }
}

动态配置（app.config.js）

export default ({ config }) => {
  const isProduction = process.env.APP_ENV === 'production';

  return {
    ...config,
    name: isProduction ? '我的应用' : '我的应用（开发）',
    slug: 'my-app',
    extra: {
      apiUrl: isProduction ? 'https://api.production.com' : 'https://api.staging.com',
      ...config.extra,
    },
    ios: {
      ...config.ios,
      bundleIdentifier: isProduction ? 'com.company.myapp' : 'com.company.myapp.dev',
    },
    android: {
      ...config.android,
      package: isProduction ? 'com.company.myapp' : 'com.company.myapp.dev',
    },
  };
};

环境特定配置

// app.config.js
const getEnvironment = () => {
  if (process.env.APP_ENV === 'production') {
    return {
      apiUrl: 'https://api.prod.com',
      sentryDsn: 'https://prod-sentry-dsn',
    };
  }

  return {
    apiUrl: 'https://api.dev.com',
    sentryDsn: 'https://dev-sentry-dsn',
  };
};

export default {
  expo: {
    extra: getEnvironment(),
  },
};

在应用中访问：

import Constants from 'expo-constants';

const apiUrl = Constants.expoConfig?.extra?.apiUrl;

最佳实践

性能优化

  • 使用 expo-image 代替React Native Image 以获得更好性能
  • 为Android启用Hermes："jsEngine": "hermes"
  • 使用 react-native-reanimated 实现流畅动画
  • 使用 React.lazy() 懒加载屏幕

代码拆分

import { lazy, Suspense } from 'react';

const ProfileScreen = lazy(() => import('./screens/Profile'));

function App() {
  return (
    <Suspense fallback={<LoadingScreen />}>
      <ProfileScreen />
    </Suspense>
  );
}

错误边界

import * as Sentry from '@sentry/react-native';

Sentry.init({
  dsn: 'your-sentry-dsn',
  environment: __DEV__ ? 'development' : 'production',
});

export default Sentry.wrap(App);

Expo Doctor

在构建前运行：

npx expo-doctor

这检查依赖项和配置中的常见问题。

</指令>

<示例> 使用示例：

用户: "Review this code for expo framework rule compliance"
代理: [Analyzes code against guidelines and provides specific feedback]

</示例>

内存协议（必填）

开始前:

cat .claude/context/memory/learnings.md

完成后: 记录任何新发现的模式或异常。

假设中断：您的上下文可能会重置。如果不在内存中，则未发生。