React Native Action Sheet 项目教程

React Native Action Sheet 项目教程

react-native-action-sheetA cross-platform ActionSheet for React Native项目地址:https://gitcode.com/gh_mirrors/re/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"
  }

react-native-action-sheetA cross-platform ActionSheet for React Native项目地址:https://gitcode.com/gh_mirrors/re/react-native-action-sheet