useIsFocused

我们可能希望根据屏幕的当前焦点状态渲染不同的内容。库导出一个 useIsFocused 钩子来简化此操作。

import { useIsFocused } from '@react-navigation/native';

// ...

function Profile() {
  const isFocused = useIsFocused();

  return <Text>{isFocused ? 'focused' : 'unfocused'}</Text>;
}

请注意，使用此钩子会在屏幕焦点发生变化时触发组件重新渲染。如果您的组件很重，这可能会在动画期间导致延迟。您可能希望将昂贵的部件提取到单独的组件中，并使用 React.memo 或 React.PureComponent 来最大程度地减少它们的重新渲染。

与类组件一起使用

您可以将类组件包装在函数组件中以使用钩子

class Profile extends React.Component {
  render() {
    // Get it from props
    const { isFocused } = this.props;
  }
}

// Wrap and export
export default function (props) {
  const isFocused = useIsFocused();

  return <Profile {...props} isFocused={isFocused} />;
}