1.0.10 • Published 2 months ago
@seveinn/eas-template v1.0.10
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
方法二:手动安装模板
- 创建新项目:
npx create-expo-app my-app
cd my-app
- 安装模板:
npm install @seveinn/eas-template
- 复制模板文件到项目:
cp -r node_modules/@seveinn/eas-template/* .
开始使用
- 安装依赖:
npm install
- 启动开发服务器:
npm start
- 运行在特定平台:
npm run android
npm run ios
npm run web
主题切换
模板内置了主题切换功能,支持亮色和暗色模式:
- 使用主题 Hook:
import { useTheme } from '../contexts/ThemeContext';
function MyComponent() {
const { theme, toggleTheme } = useTheme();
return (
<View style={{ backgroundColor: theme.colors.background }}>
<Button onPress={toggleTheme} title="切换主题" />
</View>
);
}
- 主题配置:
// constants/theme.ts
export const lightTheme = {
colors: {
primary: '#007AFF',
background: '#FFFFFF',
text: '#000000',
// ... 其他颜色
}
};
export const darkTheme = {
colors: {
primary: '#0A84FF',
background: '#000000',
text: '#FFFFFF',
// ... 其他颜色
}
};
语言切换
模板内置了多语言支持,使用 i18next 进行国际化:
- 使用语言 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>
);
}
- 语言配置文件:
// 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',
// ... 其他翻译
};
- 语言初始化:
// 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 进行用户配置的持久化存储:
- 使用配置 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>
);
}
- 配置类型定义:
// types/config.ts
export interface AppConfig {
language: string;
theme: 'light' | 'dark';
notifications: boolean;
// ... 其他配置项
}
构建和发布流程
开发环境构建
- 开发环境构建(用于本地测试):
eas build --profile development --platform android
eas build --profile development --platform ios
预览版本构建
- 预览版本构建(用于内部测试):
eas build --profile preview --platform android
eas build --profile preview --platform ios
生产环境构建
- 生产环境构建(用于发布到应用商店):
eas build --profile production --platform android
eas build --profile production --platform ios
Android 发布准备
- 确保在
app.json
中配置了正确的包名和版本号 - 准备应用图标和启动画面
- 生成签名密钥(如果还没有):
keytool -genkey -v -keystore your-keystore.jks -keyalg RSA -keysize 2048 -validity 10000 -alias your-alias
- 在
eas.json
中配置签名信息:
{
"build": {
"production": {
"android": {
"buildType": "app-bundle",
"credentialsSource": "local"
}
}
}
}
iOS 发布准备
- 确保在
app.json
中配置了正确的 Bundle ID 和版本号 - 准备应用图标和启动画面
- 在 Apple Developer 账号中:
- 创建 App ID
- 生成分发证书
- 创建配置文件
- 在
eas.json
中配置签名信息:
{
"build": {
"production": {
"ios": {
"simulator": false,
"resourceClass": "m-medium"
}
}
}
}
提交到应用商店
- 提交到 Google Play Store:
eas submit -p android
- 提交到 App Store:
eas submit -p ios
注意事项
- 确保在提交前测试所有功能
- 检查应用图标、启动画面等资源是否正确
- 确保隐私政策和其他必要文档已准备
- 遵循各应用商店的审核指南
- 建议在提交前进行内部测试
项目结构
easbloom-template/
├── app/ # 应用主入口和路由
├── components/ # 可复用组件
├── hooks/ # 自定义 Hooks
├── pages/ # 页面组件
├── contexts/ # React Context(包含主题和配置)
├── constants/ # 常量定义(包含主题配置)
├── assets/ # 静态资源
├── scripts/ # 脚本文件
├── types/ # TypeScript 类型定义
└── i18n/ # 国际化文件(包含语言配置)
许可证
MIT