npm package: @seveinn/eas-template
Description: A React Native template based on Expo and EAS
Author: Seveinn
Latest version: 1.0.10

<!--
 * @Author: Seveinn
 * @Date: 2025-04-28 14:16:45
 * @LastEditors: Seveinn
 * @LastEditTime: 2025-04-30 18:37:15
 * @FilePath: \CursorAIProjects\eas-template\README.md
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
# EasTemplate - Expo React Native 项目模板

这是一个基于 Expo 和 EAS 的 React Native 项目模板。

## 功能特点

- 使用 Expo Router 进行路由管理
- 支持 TypeScript
- 集成了 i18n 国际化支持
- 使用 EAS 进行构建和发布
- 支持 iOS 和 Android 平台
- 支持主题切换（亮色/暗色模式）
- 支持用户配置持久化存储
- 支持多语言切换
- 新增移动端通用的滑动组件

## 使用模板

### 方法一：使用 npx 创建名为[my-app]的新项目

```bash
npx create-expo-app my-app --template @seveinn/eas-template
```

### 方法二：手动安装模板

1. 创建新项目：
```bash
npx create-expo-app my-app
cd my-app
```

2. 安装模板：
```bash
npm install @seveinn/eas-template
```

3. 复制模板文件到项目：
```bash
cp -r node_modules/@seveinn/eas-template/* .
```

## 开始使用

1. 安装依赖：
```bash
npm install
```

2. 启动开发服务器：
```bash
npm start
```

3. 运行在特定平台：
```bash
npm run android
npm run ios
npm run web
```

## 主题切换

模板内置了主题切换功能，支持亮色和暗色模式：

1. 使用主题 Hook：
```typescript
import { useTheme } from '../contexts/ThemeContext';

function MyComponent() {
  const { theme, toggleTheme } = useTheme();
  
  return (
    <View style={{ backgroundColor: theme.colors.background }}>
      <Button onPress={toggleTheme} title="切换主题" />
    </View>
  );
}
```

2. 主题配置：
```typescript
// 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：
```typescript
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. 语言配置文件：
```typescript
// 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. 语言初始化：
```typescript
// 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：
```typescript
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. 配置类型定义：
```typescript
// types/config.ts
export interface AppConfig {
  language: string;
  theme: 'light' | 'dark';
  notifications: boolean;
  // ... 其他配置项
}
```

## 构建和发布流程

### 开发环境构建

1. 开发环境构建（用于本地测试）：
```bash
eas build --profile development --platform android
eas build --profile development --platform ios
```

### 预览版本构建

1. 预览版本构建（用于内部测试）：
```bash
eas build --profile preview --platform android
eas build --profile preview --platform ios
```

### 生产环境构建

1. 生产环境构建（用于发布到应用商店）：
```bash
eas build --profile production --platform android
eas build --profile production --platform ios
```

### Android 发布准备

1. 确保在 `app.json` 中配置了正确的包名和版本号
2. 准备应用图标和启动画面
3. 生成签名密钥（如果还没有）：
```bash
keytool -genkey -v -keystore your-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias your-alias
```
4. 在 `eas.json` 中配置签名信息：
```json
{
  "build": {
    "production": {
      "android": {
        "buildType": "app-bundle",
        "credentialsSource": "local"
      }
    }
  }
}
```

### iOS 发布准备

1. 确保在 `app.json` 中配置了正确的 Bundle ID 和版本号
2. 准备应用图标和启动画面
3. 在 Apple Developer 账号中：
   - 创建 App ID
   - 生成分发证书
   - 创建配置文件
4. 在 `eas.json` 中配置签名信息：
```json
{
  "build": {
    "production": {
      "ios": {
        "simulator": false,
        "resourceClass": "m-medium"
      }
    }
  }
}
```

### 提交到应用商店

1. 提交到 Google Play Store：
```bash
eas submit -p android
```

2. 提交到 App Store：
```bash
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