EasTemplate - Expo React Native 项目模板

这是一个基于 Expo 和 EAS 的 React Native 项目模板。

功能特点

• 使用 Expo Router 进行路由管理
• 支持 TypeScript
• 集成了 i18n 国际化支持
• 使用 EAS 进行构建和发布
• 支持 iOS 和 Android 平台
• 支持主题切换（亮色/暗色模式）
• 支持用户配置持久化存储
• 支持多语言切换
• 新增移动端通用的滑动组件

使用模板

方法一：使用 npx 创建名为[my-app]的新项目

npx create-expo-app my-app --template @seveinn/eas-template

方法二：手动安装模板

1. 创建新项目：

npx create-expo-app my-app
cd my-app

2. 安装模板：

npm install @seveinn/eas-template

3. 复制模板文件到项目：

cp -r node_modules/@seveinn/eas-template/* .

开始使用

1. 安装依赖：

npm install

2. 启动开发服务器：

npm start

3. 运行在特定平台：

npm run android
npm run ios
npm run web

主题切换

模板内置了主题切换功能，支持亮色和暗色模式：

1. 使用主题 Hook：

import { useTheme } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Button onPress={toggleTheme} title="切换主题" />
    </View>
  );
}

2. 主题配置：

// constants/theme.ts
export const lightTheme = {
  colors: {
    primary: '#007AFF',
    background: '#FFFFFF',
    text: '#000000',
    // ... 其他颜色
  }
};

export const darkTheme = {
  colors: {
    primary: '#0A84FF',
    background: '#000000',
    text: '#FFFFFF',
    // ... 其他颜色
  }
};

语言切换

模板内置了多语言支持，使用 i18next 进行国际化：

1. 使用语言 Hook：

import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t, i18n } = useTranslation();
  
  const changeLanguage = (lng: string) => {
    i18n.changeLanguage(lng);
  };
  
  return (
    <View>
      <Text>{t('welcome')}</Text>
      <Button onPress={() => changeLanguage('zh')} title="切换到中文" />
      <Button onPress={() => changeLanguage('en')} title="Switch to English" />
    </View>
  );
}

2. 语言配置文件：

// i18n/zh.ts
export default {
  welcome: '欢迎使用 EasBloom',
  settings: '设置',
  theme: '主题',
  language: '语言',
  // ... 其他翻译
};

// i18n/en.ts
export default {
  welcome: 'Welcome to EasBloom',
  settings: 'Settings',
  theme: 'Theme',
  language: 'Language',
  // ... 其他翻译
};

3. 语言初始化：

// i18n/index.ts
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import zh from './zh';
import en from './en';

i18n
  .use(initReactI18next)
  .init({
    resources: {
      zh: { translation: zh },
      en: { translation: en }
    },
    lng: 'zh',
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    }
  });

export default i18n;

用户配置存储

使用 AsyncStorage 进行用户配置的持久化存储：

1. 使用配置 Hook：

import { useConfig } from '../contexts/ConfigContext';

function MyComponent() {
  const { config, updateConfig } = useConfig();
  
  const handleLanguageChange = async (language: string) => {
    await updateConfig({ language });
  };
  
  return (
    <Picker
      selectedValue={config.language}
      onValueChange={handleLanguageChange}
    >
      <Picker.Item label="中文" value="zh" />
      <Picker.Item label="English" value="en" />
    </Picker>
  );
}

2. 配置类型定义：

// types/config.ts
export interface AppConfig {
  language: string;
  theme: 'light' | 'dark';
  notifications: boolean;
  // ... 其他配置项
}

构建和发布流程

开发环境构建

1. 开发环境构建（用于本地测试）：

eas build --profile development --platform android
eas build --profile development --platform ios

预览版本构建

1. 预览版本构建（用于内部测试）：

eas build --profile preview --platform android
eas build --profile preview --platform ios

生产环境构建

1. 生产环境构建（用于发布到应用商店）：

eas build --profile production --platform android
eas build --profile production --platform ios

Android 发布准备

1. 确保在 app.json 中配置了正确的包名和版本号
2. 准备应用图标和启动画面
3. 生成签名密钥（如果还没有）：

keytool -genkey -v -keystore your-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias your-alias

4. 在 eas.json 中配置签名信息：

{
  "build": {
    "production": {
      "android": {
        "buildType": "app-bundle",
        "credentialsSource": "local"
      }
    }
  }
}

iOS 发布准备

1. 确保在 app.json 中配置了正确的 Bundle ID 和版本号
2. 准备应用图标和启动画面
3. 在 Apple Developer 账号中：
   • 创建 App ID
   • 生成分发证书
   • 创建配置文件
4. 在 eas.json 中配置签名信息：

{
  "build": {
    "production": {
      "ios": {
        "simulator": false,
        "resourceClass": "m-medium"
      }
    }
  }
}

提交到应用商店

1. 提交到 Google Play Store：

eas submit -p android

2. 提交到 App Store：

eas submit -p ios

注意事项

1. 确保在提交前测试所有功能
2. 检查应用图标、启动画面等资源是否正确
3. 确保隐私政策和其他必要文档已准备
4. 遵循各应用商店的审核指南
5. 建议在提交前进行内部测试

项目结构

easbloom-template/
├── app/                # 应用主入口和路由
├── components/         # 可复用组件
├── hooks/             # 自定义 Hooks
├── pages/             # 页面组件
├── contexts/          # React Context（包含主题和配置）
├── constants/         # 常量定义（包含主题配置）
├── assets/            # 静态资源
├── scripts/           # 脚本文件
├── types/             # TypeScript 类型定义
└── i18n/              # 国际化文件（包含语言配置）

许可证

MIT