React Native Popover View 使用教程
1. 项目的目录结构及介绍
react-native-popover-view/
├── src/
│ ├── Popover.js
│ ├── PopoverController.js
│ ├── PopoverTouchable.js
│ ├── PopoverView.js
│ ├── index.js
│ └── styles.js
├── example/
│ ├── App.js
│ ├── index.js
│ └── package.json
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
└── yarn.lock
-
src/
:包含项目的主要源代码文件。Popover.js
:定义了 Popover 组件的主要逻辑。PopoverController.js
:提供了控制 Popover 显示和隐藏的功能。PopoverTouchable.js
:处理触摸事件的组件。PopoverView.js
:Popover 的视图组件。index.js
:项目的入口文件,导出所有组件。styles.js
:包含 Popover 组件的样式定义。
-
example/
:包含一个示例项目,展示了如何使用react-native-popover-view
。App.js
:示例应用的主要文件。index.js
:示例项目的入口文件。package.json
:示例项目的依赖管理文件。
-
.gitignore
:指定 Git 版本控制系统忽略的文件和目录。 -
.npmignore
:指定 npm 发布时忽略的文件和目录。 -
LICENSE
:项目的开源许可证。 -
README.md
:项目的说明文档。 -
package.json
:项目的依赖管理文件和脚本。 -
yarn.lock
:锁定依赖版本的文件。
2. 项目的启动文件介绍
项目的启动文件位于 example/index.js
,内容如下:
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
AppRegistry.registerComponent(appName, () => App);
import {AppRegistry} from 'react-native'
:导入 React Native 的AppRegistry
模块。import App from './App'
:导入示例应用的主要组件App
。import {name as appName} from './app.json'
:从app.json
文件中导入应用的名称。AppRegistry.registerComponent(appName, () => App)
:注册应用的主要组件,使其可以在设备上运行。
3. 项目的配置文件介绍
package.json
package.json
文件位于项目根目录,内容如下:
{
"name": "react-native-popover-view",
"version": "4.0.0",
"description": "A well-tested, adaptable, lightweight Popover component for react-native",
"main": "src/index.js",
"scripts": {
"test": "jest",
"lint": "eslint src example",
"example": "cd example && yarn && yarn start"
},
"repository": {
"type": "git",
"url": "git+https://github.com/SteffeyDev/react-native-popover-view.git"
},
"keywords": [
"react-native",
"popover",
"popup",
"modal",
"android",
"ios"
],
"author": "SteffeyDev",
"license": "MIT",
"bugs": {
"url": "https://github.com/SteffeyDev/react-native-popover-view/issues"
},
"homepage": "https://github.com/SteffeyDev/react-native-popover-view#readme",
"dependencies": {
"prop-types": "^15.7.2",
"react-native-portal": "^1.0.3"
},
"devDependencies": {
"eslint": "^7.12.1",
"eslint-config-prettier": "^6.15.0",
"eslint-plugin-prett