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

Question

所以，我有以下屏幕：

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

理论上是可行的...但是在到达新房间后移除之前的路线时有一个奇怪的动画，如下。如果你们对这个问题有任何解决方案，请告诉我...

Answer 1

从您的代码看来您正在使用 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 定义活动路由。

有关详细信息，请参阅以下内容 link：

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

Answer 2

您应该可以使用以下方法更改动画：

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

Answer 3

在 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

重置动作被replace取代。

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

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

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

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

Remove last route from react navigation stack

reactjs

react-native

react-navigation

在 react-navigation@3.0

在 react-navigation@6.0