React Navigation中使用navigation.navigate跳转时如何重置页面到初始状态？

出现该问题的核心原因是React Navigation栈导航默认会复用栈中已存在的页面实例，不会重新触发组件挂载流程，因此组件内部的state会保留上次修改的结果。

提示：你提供的示例代码中onPress=(() => {})写法存在语法错误，正确写法为onPress={() => {}}，建议先修正该问题再测试后续方案。

以下是几种可直接落地的解决方案，按实现成本从低到高排序：

方案1：开启unmountOnBlur自动卸载失焦页面（最推荐，无需修改组件代码） #

React Navigation 6.x及以上版本原生支持unmountOnBlur配置，开启后页面只要失焦就会自动卸载，下次进入时重新挂载，状态自然重置为初始值。
仅需在对应路由的Stack.Screen配置中添加属性即可：

<Stack.Screen
  name="A"
  component={A}
  options={{ unmountOnBlur: true }}
/>

方案2：使用reset方法重置路由栈 #

如果仅需要在B跳转回A的场景下重置A的状态，不需要所有进入A的场景都重置，可以在B页面的跳转逻辑中使用reset替代navigate：

// B页面跳转按钮的onPress逻辑
<Button onPress={() => { 
  navigation.reset({
    index: 0,
    routes: [{ name: 'A' }]
  })
}}>Go To A</Button>

该方法会清空当前路由栈，创建全新的A页面实例，自动使用初始状态。

方案3：跳转时传入唯一key强制创建新实例 #

如果不想修改路由配置也不想清空栈，可以在调用navigate时传入唯一的key参数，React会识别为新的组件实例，触发重新挂载：

// B页面跳转按钮的onPress逻辑
<Button onPress={() => { 
  navigation.navigate({
    name: 'A',
    key: `A_${Date.now()}` // 每次跳转生成唯一key
  })
}}>Go To A</Button>

方案4：使用useFocusEffect监听页面聚焦重置状态 #

如果需要保留页面实例，仅重置部分状态，可以使用React Navigation提供的useFocusEffect钩子，在页面每次聚焦时触发状态重置：

import React, { useState, useCallback } from "react";
import { useFocusEffect } from '@react-navigation/native';
import {Center, Button, Text} from "native-base";

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

  // 页面每次聚焦时重置input状态
  useFocusEffect(
    useCallback(() => {
      setInput("");
    }, [])
  );

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

内容的提问来源于stack exchange，提问作者Joey Stout