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} />;
}