React Native Notificated 项目教程

React Native Notificated 项目教程

react-native-notificated⚡️React Native toast notifications项目地址:https://gitcode.com/gh_mirrors/re/react-native-notificated

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

React Native Notificated 项目的目录结构如下：

react-native-notificated/
├── src/
│   ├── components/
│   ├── hooks/
│   ├── styles/
│   ├── utils/
│   ├── index.ts
│   └── ...
├── example/
│   ├── App.tsx
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
├── README.md
└── ...

目录结构介绍

• src/: 包含项目的核心代码，包括组件、钩子、样式和工具函数等。

  • components/: 存放项目的 React 组件。
  • hooks/: 存放自定义的 React Hooks。
  • styles/: 存放项目的样式文件。
  • utils/: 存放工具函数和辅助代码。
  • index.ts: 项目的入口文件，导出主要的 API 和组件。

• example/: 包含一个示例应用，用于展示如何使用 react-native-notificated。

  • App.tsx: 示例应用的主组件。
  • index.js: 示例应用的入口文件。

• .gitignore: 指定 Git 忽略的文件和目录。

• package.json: 项目的依赖和脚本配置文件。

• README.md: 项目的介绍和使用说明。

2. 项目的启动文件介绍

入口文件

项目的入口文件是 src/index.ts，该文件导出了主要的 API 和组件，供外部使用。

// src/index.ts

export { createNotifications } from './hooks/useNotifications';
export { NotificationsProvider } from './components/NotificationsProvider';
export { default as useNotifications } from './hooks/useNotifications';

示例应用入口文件

示例应用的入口文件是 example/index.js，该文件负责启动示例应用。

// example/index.js

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';

AppRegistry.registerComponent(appName, () => App);

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。

{
  "name": "react-native-notificated",
  "version": "1.0.0",
  "description": "React Native toast notifications",
  "main": "src/index.ts",
  "scripts": {
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-native": "^0.64.2",
    "react-native-reanimated": "^2.2.0",
    "react-native-gesture-handler": "^1.10.3"
  },
  "devDependencies": {
    "@types/react": "^17.0.11",
    "@types/react-native": "^0.64.10",
    "typescript": "^4.3.5"
  }
}

.gitignore

.gitignore 文件指定了 Git 忽略的文件和目录，避免将不必要的文件提交到版本控制中。

# .gitignore

node_modules/
dist/
*.log
*.env

README.md

README.md 文件包含了项目的介绍、安装步骤、使用说明和示例代码。

# React Native Notificated

React Native Notificated 是一个用于 React Native 应用的 toast 通知库。

## 安装

```bash
yarn add react-native-notificated

使用

import { createNotifications } from 'react-native-notificated';

const [NotificationsProvider, useNotifications] = createNotifications();

function App() {
  return (
    <NotificationsProvider>
      <YourAppComponent />
    </NotificationsProvider>
  );
}

示例

查看 example/ 目录下的示例应用。

以上是 React Native Notificated 项目的目录结构、启动文件和配置文件的介绍。

react-native-notificated⚡️React Native toast notifications项目地址:https://gitcode.com/gh_mirrors/re/react-native-notificated