1.0.10 • Published 2 months ago

@seveinn/eas-template v1.0.10

Weekly downloads
-
License
MIT
Repository
-
Last release
2 months ago

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
  1. 安装模板:
npm install @seveinn/eas-template
  1. 复制模板文件到项目:
cp -r node_modules/@seveinn/eas-template/* .

开始使用

  1. 安装依赖:
npm install
  1. 启动开发服务器:
npm start
  1. 运行在特定平台:
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>
  );
}
  1. 主题配置:
// 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>
  );
}
  1. 语言配置文件:
// 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',
  // ... 其他翻译
};
  1. 语言初始化:
// 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>
  );
}
  1. 配置类型定义:
// 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
  1. 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
  1. 提交到 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