React Native Action Sheet 项目教程
1. 项目的目录结构及介绍
React Native Action Sheet 项目的目录结构如下:
react-native-action-sheet/
├── src/
│ ├── ActionSheet.js
│ ├── ActionSheetProvider.js
│ ├── connectActionSheet.js
│ ├── index.js
│ └── useActionSheet.js
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .prettierignore
├── .prettierrc
├── CHANGELOG.md
├── LICENSE
├── README.md
├── package.json
├── tsconfig.json
└── yarn.lock
目录结构介绍
src/
: 包含项目的主要源代码文件。ActionSheet.js
: 实现 ActionSheet 组件的核心逻辑。ActionSheetProvider.js
: 提供 ActionSheet 的上下文环境。connectActionSheet.js
: 用于连接 ActionSheet 的高阶组件。index.js
: 项目的入口文件。useActionSheet.js
: 提供自定义 Hook 以使用 ActionSheet。
.eslintignore
: 忽略 ESLint 检查的文件列表。.eslintrc.js
: ESLint 配置文件。.gitignore
: Git 忽略文件列表。.prettierignore
: 忽略 Prettier 格式化的文件列表。.prettierrc
: Prettier 配置文件。CHANGELOG.md
: 项目更新日志。LICENSE
: 项目许可证。README.md
: 项目说明文档。package.json
: 项目依赖和脚本配置。tsconfig.json
: TypeScript 配置文件。yarn.lock
: Yarn 锁定文件,确保依赖版本一致。
2. 项目的启动文件介绍
项目的启动文件是 src/index.js
,它是整个项目的入口点。该文件导出了项目的主要功能模块,包括 ActionSheet 组件、ActionSheetProvider 和自定义 Hook useActionSheet
。
// src/index.js
export { default as ActionSheetProvider } from './ActionSheetProvider';
export { default as connectActionSheet } from './connectActionSheet';
export { default as useActionSheet } from './useActionSheet';
启动文件介绍
ActionSheetProvider
: 提供 ActionSheet 的上下文环境,需要在应用的顶层组件中使用。connectActionSheet
: 用于连接 ActionSheet 的高阶组件,方便在类组件中使用 ActionSheet。useActionSheet
: 提供自定义 Hook,方便在函数组件中使用 ActionSheet。
3. 项目的配置文件介绍
项目的配置文件主要包括 package.json
、.eslintrc.js
、.prettierrc
和 tsconfig.json
。
package.json
package.json
文件包含了项目的依赖、脚本命令和其他元数据。
{
"name": "@expo/react-native-action-sheet",
"version": "3.11.0",
"description": "A cross-platform ActionSheet for React Native",
"main": "src/index.js",
"scripts": {
"test": "jest",
"lint": "eslint src",
"format": "prettier --write \"src/**/*.js\""
},
"dependencies": {
"react-native-portal": "^1.0.12"
},
"devDependencies": {
"@babel/core": "^7.12.9",
"@babel/runtime": "^7.12.5",
"@react-native-community/eslint-config": "^2.0.0",
"eslint": "^7.14.0",
"jest": "^26.6.3",
"prettier": "^2.2.1",
"react": "17.0.1",
"react-native": "0.64.0",
"react-test-renderer": "17.0.1"
},
"peerDependencies": {
"react": "*",
"react-native": "*"
},
"jest": {
"preset": "react-native"
}