web-dev-qa-db-ja.com

機能コンポーネントとフックでAppStateを使用する方法必要ですか、それともuseEffectを誤って使用していますか?

ユーザーがアプリにアクセスしたときに関数を実行できるようにしたい。私は、useEffectがすでにこのようなことをしていると思っていました。たとえば、電話のクリップボードを変更する(別のアプリから別のテキストをコピーする)ことを選択した場合です。しかし、コンポーネントを再レンダリングしません。

const [clipped, setClipboard] = useState();
const [appView, setAppView] = useState(AppState.currentState);

const getFromClipboard = useCallback(() => {
  Clipboard.getString().then(content => {
    console.log('content:', content)
    setClipboard(content);
  });

}, [clipped]);

useEffect(() => {
  getFromClipboard();
}, [getFromClipboard, clipped, appView]);

別のアプリから新しいテキストをクリップボードにコピーし、このアプリに戻るたびに、状態がクリッピングに変化したため、useEffectが再レンダリングされると思いますか?残念ながら、コンポーネントの最初の初期ロード後にコンソールログが呼び出されません。

私はAppStateを偶然見つけましたが、これを試してみることはできると思いましたが、useEffectでこれを設定する方法がわかりませんか?

3
hellomello

アプリを閉じたり、バックグラウンドまたはフォアグラウンドに移動したときにトリガーされるアプリの状態変更のイベントリスナーを設定できます。詳細については、ドキュメントを確認してください link

useEffect(() => {
  AppState.addEventListener('change', handleChange);  

  return () => {
    AppState.removeEventListener('change', handleChange);  
  }
}, []);


const handleChange = (newState) => {
  if (newState === "active") {
    getFromClipboard();
  }
}
9
fayeed