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

Question

通过navigation.navigate() 。

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

当用户单击另一个按钮到 go 回到A屏幕（再次通过navigation.navigate('A'); ）时，我遇到的问题出现了。 此时， A组件仍保留初始安装时的所有 state。 我希望将 state 重置为A组件的初始 state，因此用户必须从头开始重新启动任何过程。

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

编辑：
有人要求提供代码示例，下面是一个快速示例。 问题是; 如果有人导航到组件A并单击调用setInput的按钮，该按钮使文本显示在按钮上方，然后他们单击标记为Go To B的另一个按钮，这反应导航将他们带到组件B 。 如果他们继续并单击Go To A然后导航回组件A ，组件A仍将input state 等于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

你可以试试这个

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

Answer 3

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

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);

Answer 5

您可以通过为导航焦点事件创建侦听器（ return navigation.addListener("focus", () => {}) ）并将其添加到组件的 unmount 方法来解决此问题。

import { useEffect, useState } from "react";
import { View, Text } from 'react-native';

export const useCustomState = (navigation) => {
    const [username, setUsername] = useState("");

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

    return (
        <View>
            <Text>{username}</Text>
        </View>
    )
}

Answer 6

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