Блог

У меня есть четыре страницы: «ReadyScreen», «RunningScreen», «ListScreen» и «CheckScreen»

Чтобы начать выполнение, пользователь переходит от «ReadyScreen» к «ListScreen» к «CheckScreen» и, наконец, к «RunningScreen»

ReadyScreen -> ListScreen -> CheckScreen -> RunningScreen

В конце выполнения пользователя они переходят обратно в «ReadyScreen» из «RunningScreen»

Я хочу, чтобы модал переключался с их информацией о ходе выполнения, когда пользователь переходит с RunningScreen на ReadyScreen. Мне сказали, что я могу сделать это с помощью маршрута, но у меня возникли проблемы с его правильной настройкой. Вот что у меня есть до сих пор:

 function RunningScreen({navigation, route}){

const checkFinish = () => {
     onPress: () => navigation.navigate('ReadyScreen, {
     didComeFromRunningScreen: true
 })
}
 

…

 useFocusEffect(
   React.useCallback(()=>{
   ....
   if(didComeFromRunningScreen){
   toggleModal()
  }
  }, [])
}
 

Я также застрял на том, как переключить это на экране ReadyScreen

Если вы возвращаетесь к предыдущему экрану, вы не можете передавать такие параметры. или, если вы принудительно нажмете на предыдущий экран, чтобы снова открыть его, он создаст новый стек. Вы должны передать функцию обратного вызова с экрана готовности на экран запуска, а на рабочем экране, когда вы нажмете кнопку завершения, вы вызовете свою функцию обратного вызова.

Вот пример кода:

Готовый экран

 const ReadyScreen = ({ navigation }) => {
  const toggleModal = () => {
    // Your modal method to open modal
  };

  // callback func
  const openModalCallBack = () => {
    toggleModal();
  };

  const gotoRunningScreen = () => {
    navigation.navigate("RunningScreen", { openModalCB: openModalCallBack }); // passing callback func
  };

  return (
    <View>
      <Button onPress={gotoRunningScreen} />
    </View>
  );
};
export default ReadyScreen;
 

Экран запуска

 const RunningScreen = ({ navigation, route }) => {
  const checkFinish = () => {
    const { openModalCB } = route?.params;
    openModalCB(); // Here you calling the callback func
    navigation.goBack(); // or pop()
  };

  return (
    <View>
      <Button onPress={checkFinish} />
    </View>
  );
};
export default RunningScreen;