Question

我的应用有两个底部标签，我想在每个标签中重复使用相同的屏幕组件，但是使用不同的参数（在UserNav中，任务是指用户的任务，而在FriendsNav中，任务是指朋友的任务任务）。

我在这里看到两个选项：

为用户和朋友任务创建不同的屏幕文件（即使所有UI元素都相同），然后拉出所有共享组件。这两个屏幕将只调用共享的组件。
使用一个屏幕文件---但在每个导航器中分配不同的routeNames，然后在调用组件时，使用React Navigation提供的信息来确定正在使用哪个路由/ Navigator。

我目前正在使用后者，使用navigation.state.routeName确定当前调用的路线（并从那里相应地设置状态）。我还可以使用redux存储更多的全局导航状态，但这似乎不必要。

在这里是否有实现目标的推荐方法？

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-为每个选项卡创建不同的屏幕文件。为什么？

我不想手动检查堆栈中每个屏幕的路由。
我不知道如何在不将其存储在Redux（GitHub reference）中的情况下确定活动选项卡，因此我不想依靠Redux。

反应导航：在两个底部标签中使用相同的屏幕

1 个答案: