反应-导航：在两个底部卡使用相同的屏幕

Question

我的应用程序有两个底部卡，我想重用在每个选项卡相同的屏幕组件，但具有不同的参数（在UserNav，任务指的是用户的任务与在FriendsNav，任务指的是朋友的任务）。

在这里我看到两个选项：

1. 用户与朋友的任务（即使所有UI元素是相同的）创建不同的屏幕文件，并拉出任何共享组件出来。两个屏幕将只需要调用的共享组件。
2. 使用一个画面文件---但在每种导航指定为不同routeNames - 然后当组件被调用时，使用由导航作出反应提供的信息来确定哪个路线/正在使用导航。

我目前正在做后期，用navigation.state.routeName确定称为当前路径（并从那里，相应地设置状态）。我还可以使用终极版存储更多的全球导航状态，但是这似乎没有必要。

有没有推荐的方式在这里实现的目标是什么？

const UserNav = createStackNavigator({
  UserTasks: {
    screen: Tasks 
});

const FriendsNav = createStackNavigator({
  FriendTasks: {
    screen: Tasks //note using the same screen again
  }
});
createBottomTabNavigator({
    User: UserNav,
    Friends: FriendsNav
})

任务屏幕，采用routeName确定数据

class Tasks extends React.Component {
    render() { 

        //Using the active tab seems cleaner than routeName but it is 
        //not clear to me how to get this from React Navigation state
        const route = this.props.navigation.state.routeName; 

        //get state from redux
        const tasks = (route === "UserTasks" ? this.props.user_tasks : this.props.friend_tasks;

        return (//code using tasks)

}

Answer 1

我最终选择选项1 - 每个标签创建不同的屏幕文件。为什么？

1. 我不希望有在堆栈每个屏幕，手动检查路线。
2. 我无法弄清楚如何确定活动标签的无需将其存储在终极版（GitHub的reference），我不想依靠终极版本。