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

Question

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

假设用户导航到某个A屏幕并设置了某种状态，然后他们单击该屏幕上的按钮并B通过navigation.navigate('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

你可以试试这个，setInput("")当你回来时screen A 它会设置screen B

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 2

  <Drawer.Screen
    name="Your Screen"
    component={screen.ConcernAddScreen}
    options={{unmountOnBlur: true}} // This right here will mount the component and reset your screen
  />

Answer 3

我找到了我自己问题的答案。基本上，如果您想卸载/重新安装组件（这将重置其状态），您可以执行以下操作：

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