如何重置来回切换 React Native 之间的倒计时

Question

我有一个包含两个页面的应用程序，它们都显示 countdown。显示时的每个倒计时都以开始时配置的值开始。如果当前显示的倒计时达到零，则会显示其他倒计时的页面。它应该来回走动。我可以在两个页面之间切换，但我不知道如何重置倒计时。在我的例子中，倒计时达到零并且来回切换时不会再次开始。

第一页

const Page1 = ({ navigation }) => {
  return (
    <View>
      <CountDown
        size={40}
        until={someValueConfiguredAtTheBeginning}
        timeToShow={["S"]}
        onFinish={() => {
          navigation.navigate("Page2");
        }}
      />
    </View>
  );
};

第二页

const Page2 = ({ navigation }) => {
  return (
    <View>
      <CountDown
        size={40}
        until={someValueConfiguredAtTheBeginning}
        timeToShow={["S"]}
        onFinish={() => {
          navigation.navigate("Page1");
        }}
      />
    </View>
  );
};

如何修改在倒计时运行倒数后，来回切换时总是在计数器中使用 someValueConfiguredAtTheBeginning 而不是零的代码？

Answer 1

您可以使用导航侦听器了解屏幕何时更改

const [SomeValueConfiguredAtTheBeginning, setSomeValueConfiguredAtTheBeginning] = useState(90)

    useEffect(() => {
        //create a listener everytime your screen is not focus and reset your countdown
        navigation.addListener('blur', () => {
            //here set your state to the original value;
            SetSomeValueConfiguredAtTheBeginning(90);
        });
    
        return () =>{
            //when component will unmounted remove the listener
            navigation.removeListener('blur', () => {}); 
        };
     }, [navigation]);

Answer 2

解决方案

我刚刚创建了一个全局状态，我将每个 onFinish 上的存储变量增加一个。通过状态更新整个组件被重新渲染。

const Page1 = ({ navigation }) => {
  const [rerender, setRerender] = useContext(Renderer); /*init of global state*/
  return (
    <View>
      <CountDown
        size={40}
        until={someValueConfiguredAtTheBeginning}
        timeToShow={["S"]}
        onFinish={() => {
          navigation.navigate("Page2"); setRerender(rerender+1) 
        }} /*increase global state on every onFinish by one*/
      />
    </View>
  );
};

第二页

const Page2 = ({ navigation }) => {
  return (
    <View>
      <CountDown
        size={40}
        until={someValueConfiguredAtTheBeginning}
        timeToShow={["S"]}
        onFinish={() => {
          navigation.navigate("Page1");
        }}
      />
    </View>
  );
};

如何重置来回切换 React Native 之间的倒计时

How to reset countdown between switching back and forth React Native

reactjs

react-native

解决方案