更改用户类型的选项卡

时间:2018-02-13 11:14:37

标签: react-native redux react-navigation tabnavigator

我有两种类型的用户:1 - 客户2 - 专家 用户登录系统后,他们会看到不同的标签,这是我的导航器

export const AppNavigator = StackNavigator({
Splash: {
    screen: Splash
},
Login: {
    screen: Login
},
Register: {
    screen: Register
},
Verify: {
    screen: Verify
},
Tabs: {
    screen: TabNavigator
}
}, { headerMode: 'none' });

这是我的tabNavigator

Setting: {
    screen: settingNavigator,
    navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
            <Icon name="cog" size={20} color={tintColor}/>
        )
    }
},
MyProjects: {
    screen: myProjectsNavigator,
    navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
            <Icon name="th-list-1" size={20} color={tintColor}/>
        )
    }
},
Requests: {
    screen: requestsNavigator,
    navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
            <Icon name="chat-inv" size={20} color={tintColor}/>
        )
    }
},
Customers: {
    screen: customersNavigator,
    navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
            <Icon name="users" size={20} color={tintColor}/>
        )
    }
},

Profile: {
    screen: profileNavigator,
    navigationOptions: {
        tabBarIcon: ({ tintColor }) => (
            <Icon name="user" size={20} color={tintColor}/>
        )
    }
}
}, {
tabBarPosition: 'bottom',
animationEnabled: true,
tabBarOptions: {
    showIcon: true,
    showLabel: false,
    activeTintColor: '#1e87f0',
    inactiveTintColor: '#808080',
    animationEnabled: true,
    indicatorStyle: {
        backgroundColor: '#fff',
    },
    style: {
        backgroundColor: '#fff',
        borderColor: '#C1CED8'
    }
},
headerMode: Platform.OS === 'ios' ? 'screen' : 'none',
lazy: false
});

现在如果userType是客户,他/她应该只看到Setting和myProjects, 如果userType是Expert,他/她应该看到所有5个标签,

我试图返回2个不同的导航器依赖于像这样的用户类型

if (user.type === 'expert') {
    return <ExpertNavigator navigation={addNavigationHelpers({ dispatch, state: nav })}/>;
} else {
    return <CustomerNavigator navigation={addNavigationHelpers({ dispatch, state: nav })}/>;
}

ExpertNavigator和CustomerNavigator之间的差异只是他们的选项卡,但是当我使用客户用户登录时,我收到了错误,其标题是没有为“请求”选项卡定义路由

我该如何实现?

0 个答案:

没有答案