Expo Material 3 Theme 使用教程

1. 项目目录结构及介绍

Expo Material 3 Theme 是一个允许你从 Android 12+ 设备检索 Material 3 动态主题的开源项目，并为不兼容的设备提供备用主题。项目的目录结构如下：

expo-material3-theme/
├── android/
├── docs/
├── example/
├── src/
│   ├── .eslintrc.js
│   ├── .gitignore
│   ├── .lintstagedrc.js
│   ├── .npmignore
│   ├── .npmrc
│   ├── .nvmrc
│   ├── .prettierrc.js
│   ├── .releaserc
│   ├── CHANGELOG.md
│   ├── LICENSE
│   ├── README.md
│   ├── commitlint.config.js
│   ├── expo-module.config.json
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── tsconfig.json
└── ...

• android/: 包含 Android 平台相关的代码。
• docs/: 存放项目的文档。
• example/: 一个示例项目，展示如何使用本库。
• src/: 源代码目录，包括项目的主要逻辑和配置文件。
• .eslintrc.js: ESLint 配置文件。
• .gitignore: Git 忽略文件。
• .lintstagedrc.js: Lint-staged 配置文件。
• .npmignore: NPM 忽略文件。
• .npmrc: NPM 配置文件。
• .nvmrc: Node.js 版本管理器配置文件。
• .prettierrc.js: Prettier 配置文件。
• .releaserc: Release 配置文件。
• CHANGELOG.md: 项目更新日志。
• LICENSE: 项目许可证信息。
• README.md: 项目介绍和说明。
• commitlint.config.js: Commit 消息校验配置文件。
• expo-module.config.json: Expo 模块配置文件。
• package.json: 项目包管理文件。
• pnpm-lock.yaml: Pnpm 锁文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动主要是通过 example/ 目录下的示例应用来展示如何集成和使用 expo-material3-theme。在 example/ 目录中，你可以找到 App.js 文件，这是应用的入口文件。以下是一个简单的启动示例：

import { useMaterial3Theme } from '@pchmn/expo-material3-theme';
import { useColorScheme, View, Button } from 'react-native';

function App() {
  const colorScheme = useColorScheme();
  const { theme } = useMaterial3Theme();

  return (
    <View style={{ backgroundColor: theme[colorScheme].background }}>
      <Button color={theme[colorScheme].primary}>Themed button</Button>
    </View>
  );
}

export default App;

这个例子中，useMaterial3Theme 钩子用于获取系统的 Material 3 主题或者备用主题，并应用到 React Native 的 View 和 Button 组件上。

3. 项目的配置文件介绍

项目的配置文件主要包括以下几个：

• expo-module.config.json: 这个文件用于定义 Expo 模块的元数据和配置选项。
• package.json: 包含项目的依赖、脚本和配置信息。例如，你可以在这里找到如何安装和运行项目的脚本。
• tsconfig.json: TypeScript 配置文件，定义了 TypeScript 编译器的选项。

这些配置文件是项目能够正确运行和构建的关键，确保了开发环境和生产环境的一致性。