https://github.com/ljunb/rn-beginner-guidance-decorator
🚀更快捷地为 React Native App 添加新手引导组件。
https://github.com/ljunb/rn-beginner-guidance-decorator
beginner-s-guide decorator react-native
Last synced: 9 months ago
JSON representation
🚀更快捷地为 React Native App 添加新手引导组件。
- Host: GitHub
- URL: https://github.com/ljunb/rn-beginner-guidance-decorator
- Owner: ljunb
- License: mit
- Created: 2017-12-28T07:29:22.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-03-14T02:07:34.000Z (over 2 years ago)
- Last Synced: 2025-03-28T23:44:02.731Z (over 1 year ago)
- Topics: beginner-s-guide, decorator, react-native
- Language: JavaScript
- Homepage:
- Size: 12.7 KB
- Stars: 28
- Watchers: 2
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## rn-beginner-guidance-decorator
[](https://www.npmjs.com/package/rn-beginner-guidance-decorator)
[](https://www.npmjs.com/package/rn-beginner-guidance-decorator)
[](https://www.npmjs.com/package/rn-beginner-guidance-decorator)
[](https://github.com/ljunb/rn-beginner-guidance-decorator/blob/master/LICENSE)
这是一个可以更快速、简便地为 React Naitve App 添加新手引导的轻便 `Decorator` 。App 中可能有多个页面需要添加新手引导，且实现逻辑大同小异，如果每个页面都实现一遍，代码冗余，耦合度也高。使用该组件，只要在目标页面，按需注入需要的新手引导组件即可。
## 安装
使用 `npm`：
```shell
npm install rn-beginner-guidance-decorator --save
```
用 `yarn`：
```shell
yarn add rn-beginner-guidance-decorator
```
## 使用示例
```javascript
import { injectGuidance } from 'rn-beginner-guidance-decorator';
import BeginnerGuidanceView from './components/BeginnerGuidanceView';
// 1 Decorator 方式
@injectGuidance(BeginnerGuidanceView, {displayName: 'HomePage', dismissEnabled: false})
export default class HomePage extends Component {
...
}
// 2 function 方式
class HomePage extends Component {}
or
const HomePage = () => {}
export default injectGuidance(BeginnerGuidanceView, {displayName: 'HomePage'})(HomePage)
```
## 涉及参数说明
Name | Default | Description
---------------- | ----------- | -----------
displayName | | 表示当前注入后的高阶组件名称，必须唯一，必传
dismissEnabled | true | 表示是否支持点击屏幕任意位置关闭引导组件
## 引导页组件的定义
参数 `dismissEnabled` 的默认值为 `true`，适用于不点击屏幕任一位置隐藏引导页的情况。如引导页存在多步骤操作，需要根据时机自定义隐藏，则引导页组件应向外暴露 `onDismiss` 的 `props`。示例：
```javascript
export default class NewerGuideDialog extends Component {
static propTypes = {
onDismiss: PropTypes.func, // 暴露该 props
};
/**
* 按需调用 this.props.onDismiss() 来隐藏引导页
**/
handleDismiss = () => {
const { onDismiss } = this.props;
onDismiss && onDismiss();
};
render() {
return (
Dismiss
);
}
}
```
同时在引用组件时，`dismissEnabled` 设置为 `false`。如：
```javascript
import { injectGuidance } from 'rn-beginner-guidance-decorator';
import NewerGuideDialog from './components/NewerGuideDialog';
@injectGuidance(NewerGuideDialog, {displayName: 'HomePage', dismissEnabled: false})
export default class HomePage extends Component {
...
}
```
## 原则
* 组件支持 `Decorator` 语法调用，前提是已经配置了相应的语法支持
* 调用 `injectGuidance(GuidanceComponent, {displayName})(TargetComponent)` 注入时，`displayName` 是必传的，将用于生成高阶组件的名称和本地缓存标识位