在 React Native 中创建自定义底部选项卡导航器 [英] Create custom bottom tab navigator in React native

问题描述

大家好，我想在 React Native 中创建时尚和自定义的底部标签导航，任何人都知道如何在上面创建此提及

Hello guys I want to create stylish and custom bottom tab navigation in react native can anyone have any idea how to create this mention in above

推荐答案

const customTabBarStyle = {
    activeTintColor: '#0091EA',
    inactiveTintColor: 'gray',
    style: {backgroundColor: 'white' },
}
return (
    <Tab.Navigator
    initialRouteName="Home"
    activeColor="#fff"
    tabBarOptions={customTabBarStyle}
    shifting="false">
    <Tab.Screen
    name="Home"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="home" color={color} size={26} />
        )
    }}
    component={HomeScreen} />
    <Tab.Screen
    name="Workout"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="fitness-center" color={color} size={26} />
        )
    }}
    component={WorkoutTabScreen} />
    <Tab.Screen
    name="Add"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <View
            style={{
                position: 'absolute',
                bottom: 0, // space from bottombar
                height: 68,
                width: 68,
                borderRadius: 68,
                justifyContent: 'center',
                alignItems: 'center',
            }}
            >
            <Icon name="add-circle-outline" color="grey" size={68}/>
            </View>
        )
    }}
    component={PayScreenComponent}/>
    <Tab.Screen
    name="Store"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="store" color={color} size={26} />
        )
    }}
    component={StoreLandingScreen} />
    <Tab.Screen
    name="Profile"
    options={{
        tabBarLabel: '',
        tabBarIcon: ({ color }) => (
            <Icon name="perm-identity" color={color} size={26} />
        )
    }}
    component={ProfileScreen} />
    </Tab.Navigator>
);

这篇关于在 React Native 中创建自定义底部选项卡导航器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！