{"id":20839102,"url":"https://github.com/sbdavid/react-navigation-lazy-screen","last_synced_at":"2025-05-08T21:35:03.776Z","repository":{"id":57341764,"uuid":"393225454","full_name":"SBDavid/react-navigation-lazy-screen","owner":"SBDavid","description":"实现页面懒加载，并补发react-navigation的首次focus事件","archived":false,"fork":false,"pushed_at":"2021-11-11T05:58:28.000Z","size":414,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-10-14T14:18:44.749Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/SBDavid.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-06T02:31:09.000Z","updated_at":"2023-06-01T13:37:22.000Z","dependencies_parsed_at":"2022-09-16T02:50:37.345Z","dependency_job_id":null,"html_url":"https://github.com/SBDavid/react-navigation-lazy-screen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2Freact-navigation-lazy-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2Freact-navigation-lazy-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2Freact-navigation-lazy-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SBDavid%2Freact-navigation-lazy-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SBDavid","download_url":"https://codeload.github.com/SBDavid/react-navigation-lazy-screen/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225110532,"owners_count":17422411,"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":[],"created_at":"2024-11-18T01:12:21.501Z","updated_at":"2024-11-18T01:12:22.169Z","avatar_url":"https://github.com/SBDavid.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-navigation-lazy-screen\n\n实现页面懒加载，并补发首次focus事件\n\n此库需要结合react-navigation使用，目前支持 StackNavigaton 和 BottomNavigation。\n\n词库解决的主要问题为：当我们在 react-navigation 中使用懒加载来加载页面时无法收到首个 focus 事件。react-navigation-lazy-screen 会向页面补发首个 focus 事件。并且 react-navigation-lazy-screen 在使用形式上更加简洁。\n\n## Installation\n\n```sh\nnpm install react-navigation-lazy-screen\n```\n\n## Usage\n\n### 1. 在Router中加入 LazyScreen 组件\n```js\nimport LazyScreen from \"react-navigation-lazy-screen\";\n\n// Tab路由\nconst Tab = createBottomTabNavigator();\nfunction Tabs() {\n  return (\n    \u003cTab.Navigator\u003e\n      \u003cTab.Screen name=\"TabA\"\u003e\n        {(props) =\u003e {\n          return (\n            \u003cLazyScreen\n              {...props} // 传入navigation、route等属性，这些属性会传入 TabScreen组件\n              pageName=\"TabA\" // 自定义属性，这些属性会传入 TabScreen组件\n              fallback={\u003cText\u003eLoading...\u003c/Text\u003e} // 如果懒加载失败则显示 fallback\n              factory={() =\u003e import('../screen/TabScreen')} // 通过懒加载方式加载组件\n            /\u003e\n          );\n        }}\n      \u003c/Tab.Screen\u003e\n      \u003cTab.Screen name=\"TabB\"\u003e\n        {/* ... */}\n      \u003c/Tab.Screen\u003e\n    \u003c/Tab.Navigator\u003e\n  );\n}\n// Stack 路由\n\u003cRootStack.Screen name=\"StackScreen\"\u003e\n  {(props) =\u003e {\n    return (\n      \u003cLazyScreen\n        {...props}\n        pageName=\"Home\"\n        fallback={\u003cText\u003eLoading...\u003c/Text\u003e}\n        factory={() =\u003e import('../screen/StackScreen')}\n      /\u003e\n    );\n  }}\n\u003c/RootStack.Screen\u003e\n```\n\n### 2. 在页面中绑定 focus 和 blur 事件\n```js\nexport default class StackScreen extends React.Component\u003cProps\u003e {\n  unsubscribeFocus: any;\n  unsubscribeBlur: any;\n\n  componentDidMount() {\n    // 绑定事件\n    this.unsubscribeFocus = this.props.addFocusListener(() =\u003e {\n      console.info(' focus');\n    });\n\n    this.unsubscribeBlur = this.props.addBlurListener(() =\u003e {\n      console.info(' blur');\n    });\n  }\n\n  componentWillUnmount() {\n    // 解绑事件\n    this.unsubscribeFocus();\n    this.unsubscribeBlur();\n  }\n\n  render() {\n    return (\n      \u003cSafeAreaView\n        // eslint-disable-next-line react-native/no-inline-styles\n        style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}\n      \u003e \n      \u003c/SafeAreaView\u003e\n    );\n  }\n}\n\n```\n\n### 3. 在组件中监听路由事件\n\u003e 您可以通过react context机制在页面的任何子组件中监听 focus blur 事件\n\n```js\nimport { AddListenerContext } from 'react-navigation-lazy-screen';\n\nclass InnerComp extends React.PureComponent\u003c{ pageName: string }\u003e {\n  unsubscribeFocus: any;\n\n  static contextType = AddListenerContext;\n\n  componentDidMount() {\n    this.unsubscribeFocus = this.context.addListener('focus', () =\u003e {\n      console.info(this.props.pageName + ' InnerComp focus');\n    });\n\n    // same for blur\n  }\n\n  componentWillUnmount() {\n    this.unsubscribeFocus();\n  }\n\n  render() {\n    return \u003cText\u003e{'The ' + this.props.pageName + ' InnerComp'}\u003c/Text\u003e;\n  }\n}\n```\n## Example\n\n请参考 example 文件夹\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbdavid%2Freact-navigation-lazy-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsbdavid%2Freact-navigation-lazy-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsbdavid%2Freact-navigation-lazy-screen/lists"}