How to make a dynamic tabnavigator?

[dominicsavb]

Expected Behavior

I want to make a dynamic tab.

for example:
I have 10 screens and 5 tabs. I can set which screen active/show at tab navigator.
-Screen A (On)
-Screen B (Off)
-Screen C (Off)
-Screen D (On)
-Screen E (Off)
-Screen F (On)
-Screen G (Off)
-Screen H (Off)
-Screen I (On)
-Screen J (On)

so at tab bar, only show: Screen A, D, F, I, J

I can change the setting from Web Service.

Your Environment

software	version
react-navigation	1.0.0-beta.22
react-native	0.51.0
node	v9.4.0
npm or yarn	npm

[brentvatne]

hi there! this is a question which is better suited for stackoverflow or discord. see https://reactnavigation.org/help.html for more information on how to get help.

[crazycodeboy]

To implement the dynamic Tab functionality, we can implement a DynamicTabNavigator:

import {BottomTabBar, createBottomTabNavigator} from 'react-navigation-tabs';

const TABS = {//在这里配置页面的路由
    Page1: {
        screen: Page1,
        navigationOptions: {
            tabBarLabel: 'Page10',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-home' : 'ios-home-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page2: {
        screen: Page2,
        navigationOptions: {
            tabBarLabel: 'Page2',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-people' : 'ios-people-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
    Page3: {
        screen: Page3,
        navigationOptions: {
            tabBarLabel: 'Page3',
            tabBarIcon: ({tintColor, focused}) => (
                <Ionicons
                    name={focused ? 'ios-chatboxes' : 'ios-chatboxes-outline'}
                    size={26}
                    style={{color: tintColor}}
                />
            ),
        }
    },
};

export default class DynamicTabNavigator extends React.Component {
    constructor(props) {
        super(props);
        console.disableYellowBox = true;
    }

    /**
     * 获取动态的Tab
     * @returns {*}
     * @private
     */
    _tabNavigator() {
        let tabs = {};
        if (this.props.navigation.state.params.tabs) {
            /**
             * 取出上一个页面传过来的要显示的tab参数，也可以是从服务端下发的的Tab的配置，
             * 比如显示createBottomTabNavigator中的那些Tab,
             * 这个配置页可以是在其他页面获取之后通过AsyncStorage写入到本地缓存，
             * 然后在这里读取缓存，也可以通过其他方式如props、global config等获取
             ***/
            this.props.navigation.state.params.tabs.forEach(e => {//根据需要定制要显示的tab
                tabs[e] = TABS[e];
            })

        } else {
            const {Page1, Page2} = TABS;//根据需要定制要显示的tab
            tabs = {Page1, Page2};
            Page1.navigationOptions.tabBarLabel = 'P1';//动态修改Tab的属性
        }
        return createBottomTabNavigator(tabs, {//应用修改后的tab
            tabBarComponent: TabBarComponent,
            tabBarOptions: {
                activeTintColor: Platform.OS === 'ios' ? '#e91e63' : '#fff',
            }
        });
    }

    render() {
        const Tabs = this._tabNavigator();
        return (
            <Tabs/>
        );
    }
}

Then, use this DynamicTabNavigator in createStackNavigator:

export const AppStackNavigator = createStackNavigator({
    HomePage: {
        screen: HomePage
    },
   ...
    TabNav: {
        screen: DynamicTabNavigator,
        navigationOptions: {//在这里定义每个页面的导航属性，静态配置
            title: "This is TabNavigator.",
        }
    }
}, {
    navigationOptions: {
        // header: null,// 可以通过将header设为null 来禁用StackNavigator的Navigation Bar
    }
});

[kolyneh]

@crazycodeboy 你好!请教一下你这里的主题是怎么切换的？对 Tabbar背景起效吗？