本机应用程序中的反应导航单击后退按钮返回错误屏幕

Question

我正在使用 React-native 构建本机应用程序，并且正在使用 React-navigation 进行导航。在主屏幕上，我有一个帖子列表。单击帖子并返回效果很好。但是，用户可以将帖子添加到收藏夹列表。当用户前往 FavScreen 查看收藏帖子列表并单击帖子时，Back 按钮将用户返回到 HomeScreen。显然它应该将用户返回到 FavScreen。 这是我的代码：

export const Navigation = StackNavigator({
    Home: { // List of all posts
        screen: HomeScreen,
        navigationOptions: {
            title: 'POSTS',
        }
    },  
    Post: { // Single post screen
        screen: PostDetailsScreen,
        navigationOptions: ({ navigation }) => ({
            title: navigation.state.params.postDetails.title,
        })
    },
});
export const TabsNavigation = TabNavigator({
    Home: { // List of posts tab
        screen: Navigation,
        navigationOptions: {
            tabBarLabel: 'POSTS',
        }
    },
    Fav: { // List of all favourite posts tab
        screen: PostsFavScreen,
        navigationOptions: {
            tabBarLabel: 'FAVOURITES',
        }
    }   
});

我需要帮助才能找到在从帖子中点击返回时返回 FavScreen 的方法。谢谢！

Answer 1

对于后退按钮，我使用了 react-native-back-button 和 CTRL-C CTRL-V 示例。它工作顺利！

https://www.npmjs.com/package/react-native-android-back-button

编辑：不推荐使用后退按钮，请改用 BackHandler ！ =)

https://facebook.github.io/react-native/releases/next/docs/backhandler.html

Answer 2

我对此并不肯定，但这可能是因为发布屏幕是在主页选项卡中使用的堆栈导航器中定义的。因此，当您从收藏转到帖子时，您将切换到主页选项卡。然后，当您按下返回时，StackNavigator 将拾取该事件并将您带回堆栈导航器的根（这将是 HomeScreen）。

虽然这是一些重复的代码，但解决此问题的方法可能是为收藏夹屏幕创建一个新的 StackNavigator，如下所示：

export const Navigation = StackNavigator({
    Home: { // List of all posts
        screen: HomeScreen,
        navigationOptions: {
            title: 'POSTS',
        }
    },  
    Post: { // Single post screen
        screen: PostDetailsScreen,
        navigationOptions: ({ navigation }) => ({
            title: navigation.state.params.postDetails.title,
        })
    },
});

export const FavNavigation = StackNavigator({
    Fav: {
        screen: PostsFavScreen,
        navigationOptions: {
            header: null,
        }
    },  
    Post: { // Single post screen
        screen: PostDetailsScreen,
        navigationOptions: ({ navigation }) => ({
            title: navigation.state.params.postDetails.title,
        })
    },
});

export const TabsNavigation = TabNavigator({
    Home: { // List of posts tab
        screen: Navigation,
        navigationOptions: {
            tabBarLabel: 'POSTS',
        }
    },
    Fav: { // List of all favourite posts tab
        screen: FavNavigation,
        navigationOptions: {
            tabBarLabel: 'FAVOURITES',
        }
    }   
});