【发布时间】：2020-11-21 14:05:01
【问题描述】：
提前感谢您帮助解决这个问题。
一些上下文（没有双关语）
我正在从事一家公司的项目，该项目将限制我将所有代码放在这里，但我会尝试在不泄露国家机密的情况下尽可能多地放上相关代码。
基本上，React Native 应用程序使用的是 React Navigation v5，我已经尝试解决这个问题两天了。我明白发生了什么，但我不明白为什么会发生或如何解决它。
在应用程序代码的某处，您有以下代码。
export const Lounge = function Lounge(props: {navigation: any}) {
const {navigation: {setOptions}} = props
const bottomTabBarCtx = useContext(BottomTabBarContext)
// const [routeName, setRouteName] = useState("LoungeList")
useEffect(() => {
setOptions({tabBarVisible: bottomTabBarCtx.isVisible})
}, [bottomTabBarCtx.isVisible, setOptions])
return <Stack.Navigator initialRouteName={"LoungeList"}>
<Stack.Screen
name="LoungeList"
component={List}
options={{headerShown: false}}
/>
<Stack.Screen
name="LoungeDetails"
component={Details}
options={{
headerLeft : buttonProps => <BackButton {...buttonProps} />,
headerRight: buttonProps => <LoungeHeaderRightDetailsButton {...buttonProps} />,
headerTitle: 'Lounge Details',
}}
/>
<Stack.Screen
name="LoungeParticipants"
component={Participants}
options={{
headerLeft : buttonProps => <BackButton {...buttonProps} />,
headerRight: buttonProps => <LoungeHeaderRightDetailsButton {...buttonProps} />,
headerTitle: 'Lounge Participants',
}}
/>
<Stack.Screen
name="LoungeAdd"
component={LoungeEdit}
options={{
headerLeft : buttonProps => <BackButton {...buttonProps} />,
headerTitle: 'Create Lounge',
}}
/>
<Stack.Screen
name="LoungeEdit"
component={LoungeEdit}
options={{
headerLeft : buttonProps => <BackButton {...buttonProps} />,
headerTitle: 'Edit Lounge',
}}
/>
...
上面的文件只是定义了可以在应用程序的这个部分导航到的路线。
初始屏幕/路线名称 = 'LoungeList'
一切正常。
在 LoungeList 屏幕上，我点击了一个休息室摘要单元格（请发挥你的想象力），然后点击将我带到下面的屏幕：LoungeDetails
在 LoungeDetails 屏幕中，我看到了休息室的详细信息，并且在该屏幕上，还有一个 加入按钮。这个按钮可以让我加入休息室。
功能应该是，当用户点击加入按钮时，按钮进入加载状态，当它完成加载时，它应该显示为Joined。发生这种情况应该但是在发生这种情况后立即我被导航到 LoungeList 屏幕
以下是我为加入休息室而执行的代码：
const userDidJoinLounge = (joinedLounge: LoungeWithUsers) => {
if(joinedLounge){
console.log("joinedLounge before update == ", joinedLounge);
const allLoungesNew = LoungeController.replaceLoungeInLoungeArray(
userCtx.allLoungesList,
joinedLounge
);
const userLoungesNew = LoungeController.getUserJoinedLoungeArrayListOnJoin(
allLoungesNew,
userCtx.userLoungeList,
joinedLounge
);
console.log("allLounges after update == ", allLoungesNew);
console.log("joinedLounges after update == ", userLoungesNew);
userCtx.updateLoungeLists(allLoungesNew, userLoungesNew)
}
}
在上面的函数中，一行
userCtx.updateLoungeLists(allLoungesNew, userLoungesNew) 接受两个参数，一个应用程序上所有休息室的列表，一个用户加入的休息室列表。此函数更新包含这两个值的上下文。
大问题
问题：我不断被重定向到 LoungeList 屏幕，即使没有任何代码指示应用这样做。
可能有帮助的事情
我玩过很多事情，其中一些可能有助于您弄清楚发生了什么的事情是：
-
React Navigation 路由配置似乎正在重新渲染。我这样说是因为当我将 initialRouteName 更改为 LoungeDetails 时，休息室详情屏幕（加入按钮所在的位置）会闪烁，但它会停留在同一屏幕上。这也告诉我，在该函数结束时，堆栈导航器会退回到 initialRouteName 是什么。
-
奇怪的是，当我只设置
allLoungesNew时，应用程序不会导航到initialRouteName，似乎只有当我在 userContext 的状态下设置userLoungesNew时才会出现此问题。
当用户点击加入按钮时，如何阻止 react-navigation 离开屏幕？
非常感谢您的帮助。我希望我已经为您提供了足够的信息来解决问题。请随时提出更多问题以帮助解决问题。我会告诉你我可以做什么。
【问题讨论】：
标签： reactjs react-native react-navigation react-context react-navigation-v5