使用反应导航时如何将屏幕状态重置为其初始状态？

Question

我想在通过 navigation.navigate() 导航时重置功能组件中的状态（回到初始状态）。

假设用户导航到 A 屏幕并设置了某些状态，然后他们单击该屏幕上的按钮并通过 navigation.navigate('B 导航到 B 屏幕）；`

当用户单击另一个按钮返回 A 屏幕（再次通过 navigation.navigate('A');）时，问题出现了。此时的 A 组件仍然保持其初始挂载的所有状态。我希望将状态重置为 A 组件的初始状态，以便用户必须从头开始重新开始任何过程。

有没有办法做到这一点？我尝试了一些半措施来监听导航返回并使用一堆 set 挂钩重置状态，但感觉不对并且效果不佳。

编辑：
有人要求提供代码示例，所以下面是一个简单的示例。问题是;如果有人导航到组件 A 并单击调用 setInput 的按钮，使文本出现在按钮上方，他们然后单击另一个标记为 Go To B 的按钮，反应导航将他们带到组件 B。如果他们随后继续并单击 Go To A，然后导航回组件 A，组件 A 的 input 状态仍将等于 Hello。我希望它被重置回一个空字符串（希望不必调用 setInput("").

import React, { useState } from "react";
import {Center, Button, Text} from "native-base";

const A = ({ route, navigation }) => {
  const [input, setInput] = useState("");

  return (
    <Center>
      <Text>{input}</Text>
      <Button onPress=(() => { setInput("Hello") })>Click Me For Words</Button>
      <Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
    </Center>
  );
};

const B = ({ route, navigation }) => {
  return (
    <Center>
      <Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
    </Center>
  );
};

Answer 1

您可以像这样调用 React Native 生命周期方法：

 componentDidMount() {
    console.log('onResume')
    //call your method here
  }

Answer 2

你可以试试这个，当你从 screen B

回到 screen A 时，它会设置 setInput("")

useEffect(() => {
   const unsubscribe = navigation.addListener('focus', () => {
         setInput("");
   });
   return unsubscribe;
}, [navigation]);

import React, { useState, useEffect } from "react";
import {Center, Button, Text} from "native-base";

const A = ({ route, navigation }) => {
  const [input, setInput] = useState("");
  useEffect(() => {
     const unsubscribe = navigation.addListener('focus', () => {
         setInput("");
     });
     return unsubscribe;
  }, [navigation]);

  return (
    <Center>
      <Text>{input}</Text>
      <Button onPress=(() => { setInput("Hello") })>Click Me For 
      Words</Button>
      <Button onPress=(() => { navigation.navigate("B") })>Go To B</Button>
    </Center>
  );
};

const B = ({ route, navigation }) => {
  return (
    <Center>
      <Button onPress=(() => { navigation.navigate("A") })>Go To A</Button>
    </Center>
  );
};

Answer 3

我找到了我自己问题的答案。基本上如果你想 unmount/remount 组件（这将重置它的状态）你可以这样做：

const resetAction = CommonActions.reset({
  index: 0,
  routes: [{ name: "A" }]
});
navigation.dispatch(resetAction);

Answer 4

不幸的是，React Navigation 出于某些不正当的原因在更改屏幕时不会卸载组件。如果你想回到默认的 React 行为，你可以在任何你会使用 useState.

的地方使用这个片段

import { useEffect, useState } from "react";

export const useCustomState = (navigation: any, defaultValue: any) => {
    const [value, setValue] = useState(defaultValue);

    useEffect(() => {
        return navigation.addListener("focus", () => {
            setValue(defaultValue);
        });
    }, [navigation]);

    return [value, setValue];
};

然后像这样使用它

const [counter, setCounter] = useCustomState(navigation, 0);

使用反应导航时如何将屏幕状态重置为其初始状态？

How do I reset a screens state to its initial state when using react navigation?

typescript

reactjs

react-native

react-navigation

react-hooks