{"id":26214411,"url":"https://github.com/ljunb/rn-beginner-guidance-decorator","last_synced_at":"2025-10-18T00:58:03.599Z","repository":{"id":92176809,"uuid":"115597594","full_name":"ljunb/rn-beginner-guidance-decorator","owner":"ljunb","description":"🚀更快捷地为 React Native App 添加新手引导组件。","archived":false,"fork":false,"pushed_at":"2024-03-14T02:07:34.000Z","size":13,"stargazers_count":28,"open_issues_count":0,"forks_count":5,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-28T23:44:02.731Z","etag":null,"topics":["beginner-s-guide","decorator","react-native"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ljunb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2017-12-28T07:29:22.000Z","updated_at":"2024-03-12T10:31:26.000Z","dependencies_parsed_at":"2024-03-12T11:46:48.948Z","dependency_job_id":"528e9120-9972-45f1-b180-0a645e2cf70a","html_url":"https://github.com/ljunb/rn-beginner-guidance-decorator","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-beginner-guidance-decorator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-beginner-guidance-decorator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-beginner-guidance-decorator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ljunb%2Frn-beginner-guidance-decorator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ljunb","download_url":"https://codeload.github.com/ljunb/rn-beginner-guidance-decorator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248637771,"owners_count":21137538,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["beginner-s-guide","decorator","react-native"],"created_at":"2025-03-12T10:16:55.535Z","updated_at":"2025-10-18T00:58:03.504Z","avatar_url":"https://github.com/ljunb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## rn-beginner-guidance-decorator\n\n[![npm](https://img.shields.io/npm/v/rn-beginner-guidance-decorator.svg)](https://www.npmjs.com/package/rn-beginner-guidance-decorator)\n[![npm](https://img.shields.io/npm/dm/rn-beginner-guidance-decorator.svg)](https://www.npmjs.com/package/rn-beginner-guidance-decorator)\n[![npm](https://img.shields.io/npm/dt/rn-beginner-guidance-decorator.svg)](https://www.npmjs.com/package/rn-beginner-guidance-decorator)\n[![npm](https://img.shields.io/npm/l/rn-beginner-guidance-decorator.svg)](https://github.com/ljunb/rn-beginner-guidance-decorator/blob/master/LICENSE)\n\n这是一个可以更快速、简便地为 React Naitve App 添加新手引导的轻便 `Decorator` 。App 中可能有多个页面需要添加新手引导，且实现逻辑大同小异，如果每个页面都实现一遍，代码冗余，耦合度也高。使用该组件，只要在目标页面，按需注入需要的新手引导组件即可。\n\n## 安装\n\n使用 `npm`：\n```shell\nnpm install rn-beginner-guidance-decorator --save\n```\n用 `yarn`：\n```shell\nyarn add rn-beginner-guidance-decorator\n```\n\n## 使用示例\n\n```javascript\nimport { injectGuidance } from 'rn-beginner-guidance-decorator';\nimport BeginnerGuidanceView from './components/BeginnerGuidanceView';\n\n// 1 Decorator 方式\n@injectGuidance(BeginnerGuidanceView, {displayName: 'HomePage', dismissEnabled: false})\nexport default class HomePage extends Component {\n  ...\n}\n\n// 2 function 方式\nclass HomePage extends Component {}\nor\nconst HomePage = () =\u003e {}\nexport default injectGuidance(BeginnerGuidanceView, {displayName: 'HomePage'})(HomePage)\n\n```\n\n## 涉及参数说明\nName             | Default     | Description\n---------------- | ----------- | -----------\ndisplayName    |  | 表示当前注入后的高阶组件名称，必须唯一，必传\ndismissEnabled | true | 表示是否支持点击屏幕任意位置关闭引导组件\n\n## 引导页组件的定义\n参数 `dismissEnabled` 的默认值为 `true`，适用于不点击屏幕任一位置隐藏引导页的情况。如引导页存在多步骤操作，需要根据时机自定义隐藏，则引导页组件应向外暴露 `onDismiss` 的 `props`。示例：\n\n```javascript\nexport default class NewerGuideDialog extends Component {\n  static propTypes = {\n    onDismiss: PropTypes.func, // 暴露该 props\n  };\n\n  /**\n   * 按需调用 this.props.onDismiss() 来隐藏引导页\n   **/\n  handleDismiss = () =\u003e {\n    const { onDismiss } = this.props;\n    onDismiss \u0026\u0026 onDismiss();\n  };\n\n  render() {\n    return (\n      \u003cView style={styles.root}\u003e\n        \u003cText style={styles.text} onPress={this.handleDismiss}\u003eDismiss\u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n同时在引用组件时，`dismissEnabled` 设置为 `false`。如：\n\n```javascript\nimport { injectGuidance } from 'rn-beginner-guidance-decorator';\nimport NewerGuideDialog from './components/NewerGuideDialog';\n\n@injectGuidance(NewerGuideDialog, {displayName: 'HomePage', dismissEnabled: false})\nexport default class HomePage extends Component {\n  ...\n}\n\n```\n\n## 原则\n\n* 组件支持 `Decorator` 语法调用，前提是已经配置了相应的语法支持\n* 调用 `injectGuidance(GuidanceComponent, {displayName})(TargetComponent)` 注入时，`displayName` 是必传的，将用于生成高阶组件的名称和本地缓存标识位\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljunb%2Frn-beginner-guidance-decorator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fljunb%2Frn-beginner-guidance-decorator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fljunb%2Frn-beginner-guidance-decorator/lists"}