تحديث الشاشة السابقة عند goBack

توجد عدة طرق لتنفيذ ذلك يمكننا استخدام ال hook التالي useIsFocused  ثم استخدام هذه القيمة ك dependency ل sideEffect لتنفيذ دالة ما كالتالي

const componentB = (props) => { 
  // يتأكد ما إذا كانت هذه الصفحة مفتوحة أم لا
  const isFocused = useIsFocused();


  useEffect(() => {
    updateSomeFunction()//isFocused يتم تنفيذ هذه الدالة بناءاً على القيمة
  },[isFocused]);
}

إن كنت تستخدم react-navigation 5.x يمكن استخادم الدالة:

componentDidMount() {
  this.loadData();

  this.focusListener = this.props.navigation.addListener('focus', () => {
    this.loadData();
  });
}

حيث نضيف مستمع لحدث التركيز و خلاله نعيد تحميل البيانات.

إن كنت تستخدم functional component نستعمل useEffect ونعمل على تحديثها بتغيير Navigation:

function Home({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      loadData();
    });
    return unsubscribe;
  }, [navigation]);

  return <HomeContent />;
}

سيتم تحديث الصفحة بتغيير الرابط وعند التركيز على هذه الصفحة.