Skip to content
🚀更快捷地为 React Native App 添加新手引导组件。
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
LICENSE
README.md
index.js
package.json

README.md

rn-beginner-guidance-decorator

npm npm npm npm

这是一个可以更快速、简便地为 React Naitve App 添加新手引导的轻便 Decorator 。App 中可能有多个页面需要添加新手引导,且实现逻辑大同小异,如果每个页面都实现一遍,代码冗余,耦合度也高。使用该组件,只要在目标页面,按需注入需要的新手引导组件即可。

安装

使用 npm

npm install rn-beginner-guidance-decorator --save

yarn

yarn add rn-beginner-guidance-decorator

使用示例

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,适用于不点击屏幕任一位置隐藏引导页的情况。如引导页存在多步骤操作,需要根据时机自定义隐藏,则引导页组件应向外暴露 onDismissprops。示例:

export default class NewerGuideDialog extends Component {
  static propTypes = {
    onDismiss: PropTypes.func, // 暴露该 props
  };

  /**
   * 按需调用 this.props.onDismiss() 来隐藏引导页
   **/
  handleDismiss = () => {
    const { onDismiss } = this.props;
    onDismiss && onDismiss();
  };

  render() {
    return (
      <View style={styles.root}>
        <Text style={styles.text} onPress={this.handleDismiss}>Dismiss</Text>
      </View>
    );
  }
}

同时在引用组件时,dismissEnabled 设置为 false。如:

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 是必传的,将用于生成高阶组件的名称和本地缓存标识位
You can’t perform that action at this time.