Question

我正在尝试在其中一个标签上使用createBottomTabNavigator制作一个createMaterialTopTabNavigator。它没有识别createMaterialTopTabNavigator，而是告诉我the component for route 'Home' must be a react component。我必须正确导入组件。有什么想法吗？

export const Tabs = createBottomTabNavigator(

{
    Home: AppTabs,

    'News': {
        screen: News,
        navigationOptions: {
            tabBarLabel: 'News',
            tabBarIcon: ({ tintColor }) => <Icon name="newspaper-o" type="font-awesome" size={26} color={tintColor} />,
            tabBarOptions: {
                activeTintColor: '#2896d3',
                labelStyle: {
                    fontSize: 14,
                },
            },
        },
    },
    'Garage': {
        screen: Garage,
        navigationOptions: {
            tabBarLabel: 'Garage',
            tabBarIcon: ({ tintColor }) => <Icon name="garage" type="material-community" size={34} color={tintColor} />,
            tabBarOptions: {
                activeTintColor: '#2896d3',
                labelStyle: {
                    fontSize: 14,
                },
            },
        },
    },
    'Chatbot': {
        screen: Chatbot,
        navigationOptions: {
            tabBarLabel: 'Support',
            tabBarIcon: ({ tintColor }) => <Icon name="ios-person-outline" type="ionicon" size={34} color={tintColor} />,
            tabBarOptions: {
                activeTintColor: '#2896d3',
                labelStyle: {
                    fontSize: 14,
                },
            },
        },
    },
},
{
    initialRouteName: 'News',
}
);

const AppTabs = createMaterialTopTabNavigator({
    Tab1: NewApps,
    Tab2: OtherApps,
}, {
        tabBarOptions: {
            scrollEnabled: true,
            labelStyle: {
                fontSize: 12,
            },
            tabStyle: {
                width: Dimensions.get('window').width / 2,
            },
            style: {
                backgroundColor: 'tomato',
            },
            indicatorStyle: {
                backgroundColor: '#fff'
            }
        },
    });

export const createRootNavigator = () => {
    return createStackNavigator(
        {
            Home: {
                screen: Login,
                navigationOptions: {
                    header: null,
                    gesturesEnabled: false
                }
            },
            Tabs: {
                screen: Tabs,
                navigationOptions: {
                    header: null,
                    gesturesEnabled: false
                }
            },
            ViewApp: {
                screen: ViewApp,
                navigationOptions: {
                    header: null,
                },
            },
        },
        {
            headerMode: "none",
            mode: "modal"
        }
    );
};

Answer 1

在createRootNavigator和createBottomTabNavigator中都具有路径名“ home”，请记住，路由名称不能在Stacks中重复。

对不起，我的英语。

如何使用createBottomTabNavigator实现createMaterialTopTabNavigator

1 个答案: