Question

我正在使用React-native构建本机应用程序，并使用React-navigation进行导航。在HomeScreen上我有一个帖子列表。点击一个帖子和后面的工作很棒。但是，用户可以将帖子添加到“收藏夹”列表中。当用户进入FavScreen查看收藏帖子列表并点击帖子时，“后退”按钮会将用户返回到主页屏幕。显然它应该将用户返回到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',
        }
    }   
});

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

2 个答案: