从反应导航堆栈中删除最后一条路线

Posted 2023-04-13

【中文标题】从反应导航堆栈中删除最后一条路线

【英文标题】：Remove last route from react navigation stack

【发布时间】：2018-03-09 12:07:30

【问题描述】：

所以，我有以下屏幕：

- ChatList
- NewRoom
- ChatRoom

基本上，我不想从刚刚创建的聊天室回到Start a new chat...而是直接进入聊天室列表。到目前为止，我想出了以下几点：

const prevGetStateForActionChatStack = ChatStack.router.getStateForAction

ChatStack.router.getStateForAction = (action, state) => 
    if (state && action.type === 'RemovePreviousScreen') 
        const routes = state.routes.slice( 0, state.routes.length - 2 ).concat( state.routes.slice( -1 ) )
        return 
            ...state,
            routes,
            index: routes.length - 1
        
    
    return prevGetStateForActionChatStack(action, state)

而且理论上是可以的……但是在到达新房间后移除之前的路线时会有一个奇怪的动画，如下。让我知道你们是否有任何解决此问题的方法...

【参考方案1】：

在 react-navigation@3.0

import  StackActions, NavigationActions  from 'react-navigation';

const resetAction = StackActions.reset(
    index: 0,
    actions: [NavigationActions.navigate( routeName: 'Profile' )],
);
this.props.navigation.dispatch(resetAction);

https://reactnavigation.org/docs/en/stack-actions.html#reset

在 react-navigation@6.0

reset动作被replace替换。

import  StackActions  from '@react-navigation/native';

navigation.dispatch(   
    StackActions.replace('Profile', user: 'jane',) 
);

https://reactnavigation.org/docs/stack-actions/#replace

【参考方案2】：

从您的代码看来，您正在使用react-navigation。

React-Navigation 有一个重置操作，可让您设置屏幕堆栈。 例如： 在你的情况下，

屏幕 1：聊天室

屏幕 2：聊天列表

如果您想从堆栈中删除聊天室屏幕，您需要将其编写为

import  NavigationActions  from 'react-navigation'

const resetAction = NavigationActions.reset(
  index: 0,
  actions: [
    NavigationActions.navigate( routeName: 'chatlist')
  ]
)
this.props.navigation.dispatch(resetAction)

这会将您的堆栈重置为只有一个屏幕作为初始屏幕，即聊天列表。 actions 数组可以有多个路由，index 定义活动路由。

更多详情请参考以下链接：

https://reactnavigation.org/docs/navigators/navigation-actions

Resetting the navigation stack for the home screen (React Navigation and React Native)

【讨论】：

基本上，我想在创建新对话时摆脱“中间”屏幕，这样我就可以直接从“聊天室”回到“房间列表”，而不必返回到“新房间”屏幕。会给你的想法一个尝试。我的代码唯一错误的是这个奇怪的动画..据我所知，reset 也没有动画？如果我错了纠正我。会试一试，然后回复。

是的，默认情况下重置动画不提供动画，除非您选择实现它。

对于那些从 Google 到达这里的人，在 v4 中，您需要使用 StackActions.reset()。

【参考方案3】：

您应该能够使用以下内容来更改动画：

export const doNotAnimateWhenGoingBack = () => (
  // NOTE https://github.com/react-community/react-navigation/issues/1865 to avoid back animation
  screenInterpolator: sceneProps => 
    if (Platform.isios) 
      // on ios the animation actually looks good! :D
      return CardStackStyleInterpolator.forHorizontal(sceneProps);
    
    if (
      sceneProps.index === 0 &&
      sceneProps.scene.route.routeName !== 'nameOfScreenYouWannaGoTo' &&
      sceneProps.scenes.length > 2
    )
      return null;

    return CardStackStyleInterpolator.forVertical(sceneProps);
  ,
);

并按如下方式使用：

const Stack = StackNavigator(
  
  ...screens...
  ,
  
    transitionConfig: doNotAnimateWhenGoingBack,
  
);