react-native - 删除导航到不同堆栈的先前堆栈

问题描述

我有一个嵌套的堆栈布局。每个堆栈都有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);

应用程序.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，所以我可以显示适当的标题。

标签： react-nativereact-navigation

react-native - 删除导航到不同堆栈的先前堆栈

问题描述

解决方案

推荐阅读