React native 反应导航-从导航状态删除组件并导航到屏幕

我将React导航用作React本机应用程序中的路由器。我有一个问题，当我在屏幕之间导航时，我们之前渲染的屏幕创建的挂钩仍然存在

我有一个完全扁平的路由器：

const AppRouter=（）=>{
const Stack=createStackNavigator（）；
返回(
);
};

当我从

Dashboard>TimeInput>InCallContainer>Dashboard>TimeInput>InCallContainer

导航时，第一次访问它时在

InCallContainer

中创建的钩子在第二次访问它时仍然存在

我正在使用以下方法进行导航：

从'@react-navigation/native'导入{StackActions}；
从“React”导入*作为React；
export const navigationRef=React.createRef（）；
导出函数导航（…参数）{
navigationRef.current.navigate（…参数）；
}

然后：

RootNavigation.navigate（'InCallContainer'）；

我可以知道钩子被创建了多次，因为如果我在使用这些钩子的组件中登录，每次我导航到它们时，我都会得到一个以上的日志。所以当我第二次访问屏幕时会有两个日志，以此类推

我希望能够第二次导航到仪表板，当我导航到仪表板时，从内存中卸载/删除此导航之前的所有组件

我试过替换、重置、按下、弹出按钮，但都没有达到预期效果

我怎样才能做到这一点

短暂性脑缺血发作

更新： 我需要从Redux Thunk中以编程方式导航到

InCallContainer

：

export const answerCall=（calleeName）=>（dispatch，getState）=>{
const{session，callType}=getState（）.callData；
acceptCall（会话，{calleeNameFromOwnContacts:calleeName}）；
分派（callData（{callState:INCOMING}））；
停止铃声（）；
RootNavigation.navigate（'InCallContainer'）；
InCallManager.start（{media:callType==VIDEO？'VIDEO'：'audio'}）；
InCallManager.turnScreenOn（）；
};

AllContainer中的屏幕尚未卸载，当我们准备在同一导航器中使用相同的键打开屏幕时，它不会重新渲染它共享其实例，因此如果您准备使用其挂钩重新渲染它，则必须创建单独的导航器。

使用

导航

对已在中的路线进行导航导航历史记录不创建新路线，只需导航到它即可
您需要使用

push

而不是

navigate

作为

RootNavigation.push（'InCallContainer'）

。

而

push

将创建新路线

了解

此示例显示了

推送

和

导航

尝试零食之间的区别。

• 使用

  导航时

  访问次数增加+1
• 但使用

  push

  以首次访问时间开始新路线。
  

代码：

导入“反应本机手势处理程序”；
从“React”导入*作为React；
从“react native”导入{按钮、视图、文本}；
从'@react-navigation/native'导入{NavigationContainer}；
从'@react navigation/stack'导入{createStackNavigator}；
功能主屏幕（{navigation}）{
常量[visitTimes，setVisitTimes]=React.useState（0）；
React.useffect（（）=>{
const unsubscribe=navigation.addListener（'focus'，（）=>{
设置访问时间（v=>v+1）；
});
退订；
}，[导航]；
返回(
到家时间：
{访问时间}
navigation.push（'Details'）}
/>
);
}
函数DetailsScreen（{navigation}）{
常量[visitTimes，setVisitTimes]=React.useState（0）；
React.useffect（（）=>{
const unsubscribe=navigation.addListener（'focus'，（）=>{
设置访问时间（v=>v+1）；
});
退订；
}，[导航]；
返回(
详细访问时间：
{访问时间}
navigation.navigate（'Home'）}
/>
);
}
const Stack=createStackNavigator（）；
函数App（）{
返回(
);
}
导出默认应用程序；

我不确定您使用的是什么挂钩，但React Navigation确实为生命周期事件公开了自己的挂钩

替换传统useEffect挂钩的示例：

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

从'@react navigation/native'导入{useFocusEffect}；
函数配置文件（）{
聚焦效应(
React.useCallback（（）=>{
//当屏幕聚焦时做些什么
return（）=>{
//在屏幕未聚焦时执行某些操作
//对于清除函数很有用
};
}, [])
);
返回；
}

---

只有当您导航到该组件并且该组件在React导航上下文中成为“焦点”时，才会触发此操作。React导航尝试提前装载所有视图以提高性能，这就是为什么传统React挂钩与React导航公开的焦点样式相比会导致问题。

Ok thank you@Jignesh-您能提供一个快速示例说明我应该如何做到这一点吗？此外，如果在导航到组件时不需要该组件的相同实例，这是否也包括所有子组件？您希望如何实现屏幕导航，因为这里我们必须创建一个单独的导航器？每次我导航到“InCallContainer”时，它必须是该组件的一个全新实例，并且每个子组件和挂钩必须是一个全新的实例