Expo 模板项目教程

Expo 模板项目教程

expo-template 📱 A template for your next Expo project: Bun, Expo 51, TypeScript, TailwindCSS, DrizzleORM, Sqlite, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form. 项目地址: https://gitcode.com/gh_mirrors/exp/expo-template

1. 项目的目录结构及介绍

Expo 模板项目的目录结构如下：

expo-template/
├── .github/                    # GitHub 仓库配置
├── .vscode/                    # VSCode 配置
├── app/                        # 应用程序主目录
│   ├── assets/                 # 静态资源，如图标、图片等
│   ├── components/             # 通用组件
│   ├── db/                     # 数据库相关文件
│   ├── lib/                    # 通用库文件
│   ├── public/                 # 公共文件，如网站图标等
│   ├── app.config.ts           # 应用配置文件
│   ├── index.ts                # 应用程序入口文件
│   └── ...                     # 其他相关文件
├── babel.config.js             # Babel 配置文件
├── biome.json                  # Biome 配置文件
├── bun.lockb                   # Bun 包管理器锁定文件
├── components.json             # 组件配置文件
├── drizzle.config.ts           # Drizzle ORM 配置文件
├── global.d.ts                 # 全局类型定义文件
├── metro.config.js             # Metro 配置文件
├── nativewind-env.d.ts         # NativeWind 环境类型定义文件
├── package.json                # 项目包配置文件
├── tailwind.config.ts          # Tailwind CSS 配置文件
├── tsconfig.json               # TypeScript 配置文件
├── vercel.json                 # Vercel 配置文件
└── ...                         # 其他相关文件

• .github/：包含 GitHub 仓库的配置文件，如 issue 和 pull request 的模板。
• .vscode/：包含 Visual Studio Code 的配置文件，如代码片段和设置。
• app/：包含应用程序的主要代码和资源。
• babel.config.js：Babel 的配置文件，用于设置 JavaScript 的转译选项。
• biome.json：Biome 的配置文件，用于设置代码格式化和修复。
• bun.lockb：Bun 包管理器的锁定文件，用于记录项目的依赖版本。
• components.json：组件配置文件，用于定义和管理项目中使用的组件。
• drizzle.config.ts：Drizzle ORM 的配置文件，用于设置数据库模型和查询。
• global.d.ts：全局类型定义文件，用于声明全局类型。
• metro.config.js：Metro 的配置文件，用于设置 React Native 的打包选项。
• nativewind-env.d.ts：NativeWind 的环境类型定义文件，用于声明 NativeWind 的类型。
• package.json：项目包配置文件，包含项目的依赖、脚本和元数据。
• tailwind.config.ts：Tailwind CSS 的配置文件，用于自定义样式。
• tsconfig.json：TypeScript 的配置文件，用于设置编译选项。
• vercel.json：Vercel 的配置文件，用于设置部署选项。

2. 项目的启动文件介绍

项目的启动文件是 app/index.ts，这是 React Native 应用的入口点。以下是启动文件的示例内容：

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('main', () => App);

这里，AppRegistry 是 React Native 的一个全局注册表，用于注册应用的主组件。App 是应用的根组件，通常是从 App.tsx 或 App.js 导入的。

3. 项目的配置文件介绍

项目的配置文件包括多个，每个文件都有其特定的作用：

• app.config.ts：应用配置文件，用于定义应用的名称、图标等基本信息。

export default {
  name: 'Expo Template',
  // ... 其他配置项
};

• tailwind.config.ts：Tailwind CSS 的配置文件，用于自定义 Tailwind 的设计系统。

import { Config } from 'tailwindcss';

const config: Config = {
  // ... 配置项
};

export default config;

• tsconfig.json：TypeScript 的配置文件，用于设置 TypeScript 的编译选项。

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    // ... 其他编译选项
  }
}

这些配置文件提供了项目的框架和基础设置，确保项目可以顺利地编译和运行。

expo-template 📱 A template for your next Expo project: Bun, Expo 51, TypeScript, TailwindCSS, DrizzleORM, Sqlite, EAS, GitHub Actions, Env Vars, expo-router, react-query, react-hook-form. 项目地址: https://gitcode.com/gh_mirrors/exp/expo-template