Question

我有一个嵌套的堆栈布局。每个堆栈都有transparentCard: true，因此可以看到背景图像。下面的屏幕截图显示了mainStack在背景中仍然可见，前景中的屏幕是嵌套在抽屉中的堆栈。如何在后台删除mainStack？

这仅在iOS上发生。旧堆栈不会在Android上显示。

我可以使用transitionConfig隐藏它吗？

导航到其他堆栈中的路线时，在下面可以看到前一个堆栈。如何删除以前的堆栈？

const withHeader = (
    screen: Function,
    routeName: string,
    Header
): StackNavigator =>
    createStackNavigator(
        {
            [routeName]: {
                screen,
                navigationOptions: ({ routeName, props }) => ({
                    header: props => <Header {...props} />
                })
            }
        },
        {
            transparentCard: true
        }
    );

const routes = {
    VideoEpisodes: {
        screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
    },
...
    About: {
        screen: withHeader(AboutScreen, "About", DrawerHeader)
    }
};

const NestedDrawer = createDrawerNavigator(routes, config);

const MainStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
            ...
        },
        Drawer: {
            screen: NestedDrawer,
            ...
        },
        VideoPlayer: {
            screen: VideoPlayerScreen,
            ...
        }
    },
    {
        mode: "card",
        transparentCard: true,
        cardStyle: { backgroundColor: "transparent" },
        tintColor: "#ffffff",
        headerMode: "screen"
    }
);

export default createAppContainer(MainStack);

App.js：

class App extends React.Component {
  componentDidMount() {
    // do stuff while splash screen is shown
    // After having done stuff (such as async tasks) hide the splash screen
    SplashScreen.hide();
  }
  render() {
    const { videos } = this.props;

    return (
      <ImageBackground
        source={require("./assets/images/TC_background.jpg")}
        style={styles.container}
      >
        <PersistGate loading={null} persistor={persistor}>
          <AppNavigator
            ref={navigatorRef => {
              NavigationService.setTopLevelNavigator(navigatorRef);
            }}
          />
        </PersistGate>
      </ImageBackground>
    );
  }
}

在componentDidMount中，在新堆栈（HomeScreen）上，我将重置设置为隐藏先前的堆栈（MainStack）：

  componentDidMount() {
    const resetAction = StackActions.reset({
      index: 0,
      actions: [NavigationActions.navigate({ routeName: "Home" })]
    });
    this.props.navigation.dispatch(resetAction);
  }

但是，它只是将我导航回上一个堆栈（MainStack）的主屏幕。我只需要隐藏它即可。有什么想法吗？

我已经设置了嵌套StackNavigators，以便可以显示相应的标题。

Answer 1

您可以使用reset方法删除上一个堆栈，如下所示：

import { StackActions, NavigationActions } from 'react-navigation';

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

如果由于this.props.navigation的不可用而无法执行此操作，请使用NavigationService.js，如下所示：

// NavigationService.js

import { NavigationActions } from 'react-navigation';

let _navigator;

function setTopLevelNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function reset(index, actions) {
  const resetAction = StackActions.reset({
    index,
    actions
  });
  _navigator.dispatch(resetAction);
}

// add other navigation functions that you need and export them

export default {
  reset,
  setTopLevelNavigator,
};

并像这样使用它：

import {reset} from "NavigationService.js"
reset(0, //your actions here);

详细了解操作here和导航服务here。

Answer 2

您是否正在使用导航？还是推？无论哪种方式，如果您不需要堆叠然后返回时，都可以使用this.props.navigation.replace而不是push / navigate。

它的用法如下：

this.props.navigation.replace("SomeScreen", { someParams: someValue });

还有@thecodrr之类的StackAction和NavigationAction。

删除导航到其他堆栈的先前堆栈

2 个答案: