Question

当我返回主屏幕时，使用嵌套堆栈，主屏幕会短暂显示，然后该应用程序退出。除了不对返回的路径进行硬编码，我如何在不退出应用程序的情况下返回主屏幕？

  componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
  }

  componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
  }

  onBackPress = () => {
    const { dispatch } = this.props;

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

应用导航器：

const withHeader = (
    screen: Function,
    routeName: string,
    Header
): StackNavigator =>
    createStackNavigator(
        {
            [routeName]: {
                screen,
                navigationOptions: ({ routeName, props }) => ({
                    header: props => <Header {...props} />
                })
            }
        },
        {
            initialRoute: "Home",
            transparentCard: true,
            cardStyle: {
                backgroundColor: "transparent",
                opacity: 1
            },
            transitionConfig: () => ({
                containerStyle: {
                    backgroundColor: "transparent"
                }
            })
        }
    );

const routes = {
    VideoEpisodes: {
        screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
    },
    TestYourself: {
        screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
    },
    MyResults: {
        screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
    },
    BookmarkedVideos: {
        screen: withHeader(
            BookmarkedVideosScreen,
            "Bookmarked Videos",
            DrawerHeader
        )
    },
    About: {
        screen: withHeader(AboutScreen, "About", DrawerHeader)
    }
};

const NestedDrawer = createDrawerNavigator(routes, config);

const MainStack = createStackNavigator(
    {
        Home: {
            screen: HomeScreen,
            navigationOptions: ({ props }) => ({
                header: props => <BasicHeader {...props} />
            })
        },
        Drawer: {
            screen: NestedDrawer,
            navigationOptions: ({ props }) => ({
                header: () => null
            })
        },
        VideoPlayer: {
            screen: VideoPlayerScreen,
            navigationOptions: ({ props }) => ({
                header: props => <BasicHeader {...props} />
            })
        }
    },
    {
        initialRoute: "Home",
        transparentCard: true,
        cardStyle: {
            backgroundColor: "transparent",
            opacity: 1
        },
        transitionConfig: () => ({
            containerStyle: {
                backgroundColor: "transparent"
            }
        })
    }
);

Answer 1

    onBackPress = () => {
        const { dispatch } = this.props;

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

Backhandler退出应用程序，而不是返回到相对屏幕

1 个答案: