https://github.com/sbdavid/react-native-page-analytics
https://github.com/sbdavid/react-native-page-analytics
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/sbdavid/react-native-page-analytics
- Owner: SBDavid
- License: mit
- Created: 2021-09-23T08:06:18.000Z (over 3 years ago)
- Default Branch: dev
- Last Pushed: 2022-08-23T07:51:39.000Z (almost 3 years ago)
- Last Synced: 2025-01-18T23:44:47.235Z (5 months ago)
- Language: TypeScript
- Size: 1.21 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-page-analytics
empty
## 安装
+ npm install @xmly/react-native-page-analytics
## 提供了class组件和hooks两种使用方式
## class组件：
### 使用方式
1. 页面继承PageAnalytics.Screen或者PageAnalytics.PureScreen，分别对应普通组件和纯组件
2. 定义 **customPageView** 和 **customPageExit** 属性，分别在 **页面展示** 和 **页面隐藏** 时执行
3. 在componentWillUnmount中添加 super.componentWillUnmount(); 移除页面事件监听
### 使用示例：
```js
import { View } from 'react-native';
import PageAnalytics, { AnalyticProps } from '@xmly/react-native-page-analytics';
interface CurrentProps {}
interface CurrentState {}
class HomePage extends PageAnalytics.Screen {
constructor(props: CurrentProps & AnalyticProps) {
super(props);
}
componentDidMount() {
}
componentWillUnmount() {
// 移除监听
super.componentWillUnmount();
}
// 页面展示埋点上传
customPageView = () => {
console.log(`发送页面pageView埋点 页面名: homePage metaId: 0`);
};
// 页面隐藏埋点上传
customPageExit = () => {
console.log(`发送页面pageExit埋点 页面名: homePage metaId: 0`);
};
render() {
return
}
}
```
### API
| 属性 | 类型 | 可选 | 含义 |
| :--- | :--- | :--- | :--- |
| customPageView | () => void | 否 | 页面展示埋点方法 |
| customPageExit | () => void | 否 | 自定义页面隐藏埋点方法 |
### 注意点
1. **须在componentWillUnmount中调用super.componentWillUnmount方法去移除页面事件监听**
## hooks：
### 使用方式：
1. 组件中使用useScreen()，参数中传入 **customPageView**，**customPageExit**，两个必传属性，分别在 **页面展示** 和 **页面隐藏** 时执行，**对于使用了路由的页面，需要将路由对象navigation传入**
### 使用实例：
```js
import { useCallback } from 'react';
import { View } from 'react-native';
import PageAnalytics, { AnalyticProps } from '@xmly/react-native-page-analytics';
interface HomePageProps {}
export default function HomePage(props: HomePageProps & AnalyticProps) {
// 页面展示埋点上传
const customPageView = useCallback(() => {
console.log(`发送页面pageView埋点 页面名: homePage metaId: 0`);
}, []);
// 页面隐藏埋点上传
const customPageExit = useCallback(() => {
console.log(`发送页面pageExit埋点 页面名: homePage metaId: 0`);
}, []);
PageAnalytics.useScreen({
customPageView,
customPageExit,
...props, // 对于有使用路由的页面，需要将路由对象navigation传入
});
return
}
```
### API
useScreen
| 方法 | 参数 | 返回值 | 含义 |
| :-- | :-- | :-- | :-- |
| useScreen | {
// 页面展示埋点上传
customPageView?: () => void;
// 页面隐藏埋点上传
customPageExit?: () => void;
// 若使用了路由，传入navigation
[index: string]: any;
} | -- | hooks
## 实现，特性
1. 此工具对页面的navigation跳转、APPstate状态变化、RN页面与Native页面互跳 三种场景都做了处理，同时对ios，安卓两端事件监听的差异做了兼容处理，保证了页面展示/隐藏数据埋点的全面准确
2. 兼容没有使用react-navigation的项目，对于没有使用路由的单RN页面项目，会对APPstate状态变化、RN页面与Native页面互跳 这两种场景做了处理
## Contributing
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT