React Native Lifecycle

English

如何安装

pnpm add react-native-lifecycle

第三方依赖

pnpm add @react-navigation/native # >= 6.0.0，可选：仅 useShow / useHide 需要

支持

| 安装包 | 版本号 | react 版本号 | react-native 版本号 | | ---------------------- | ------ | ------------ | ------------------- | | react-native-lifecycle | 3.0.0+ | 18.0.0+ | 0.73.0+ | | react-native-lifecycle | 2.0.0+ | - | 0.65.0+ | | react-native-lifecycle | 1.2.4+ | - | 0.59.0+ |

如何使用

例子

全局 Hooks

import { useAppActive, useAppInactive } from 'react-native-lifecycle';

export default function App() {
  // App 回到前台时执行
  useAppActive(() => {});

  // App 离开前台时执行
  useAppInactive(() => {});
}

页面 Hooks

import {
  useMount,
  useShow,
  useHide,
  useUnmount,
  useResize,
} from 'react-native-lifecycle';

export default function Page() {
  // 组件挂载时执行一次
  useMount(() => {});

  // 页面获得焦点，或 App 在页面聚焦期间回到前台时执行
  useShow(() => {});

  // 页面失去焦点或卸载，或 App 在页面聚焦期间退到后台时执行
  useHide(() => {});

  // 组件卸载时执行一次
  useUnmount(() => {});

  // 窗口尺寸变化时执行
  useResize(() => {});
}