在 React native 中创建自定义底部选项卡导航器

Posted 2023-02-22

【中文标题】在 React native 中创建自定义底部选项卡导航器

【英文标题】：Create custom bottom tab navigator in React native

【发布时间】：2020-04-05 19:50:41

【问题描述】：

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

【问题讨论】：

你想要一个加号图标吗？

@vaibhav gadekar，您是否设法为此找到解决方案？我遇到了同样的问题，并且没有一个给出的答案允许我像​​你的那样让图像重叠在标签导航器的顶部。

【参考方案1】：

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>
);

【讨论】：

有没有办法把你找到的加号按钮后面的背景剪掉？

【参考方案2】：

在 React Navigation V5 中，有一个 Tab.Navigator 组件的道具，您可以传递整个自定义底栏组件

<Tab.Navigator tabBar=(props) => <CustomTabBar/>>
    <Tab.Screen .../>
</Tab.Navigator>

【参考方案3】：

通过react-navigation 使用自定义标签栏的好例子进行了很好的解释

https://dev.to/hrastnik/lets-create-a-custom-animated-tab-bar-with-react-native-3496

【参考方案4】：

看看这个伟大的框架，React-Native-Tab-View。

https://github.com/react-native-community/react-native-tab-view

只需使用tabBarPosition: bottom 并根据需要呈现您的标签。

【参考方案5】：

   import createBottomTabNavigator, from 'react-navigation'

const ACTIVE_TAB_COLOR = '#60C3FF'
const INACTIVE_TAB_COLOR = '#aaa'



  const BottomStack = createBottomTabNavigator(
    
      TAB_WALLET: 
        screen:Screen1,
        navigationOptions: 
          tabBarLabel: 'Screen1',
          tabBarIcon: ( focused ) => <Icon name='iconname' focused=focused color=focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR/>
        
      ,
      TAB_SEND: 
        screen: Screen2,
        navigationOptions: 
          tabBarLabel: 'Screen2',
          tabBarIcon: ( focused ) => <Icon name='search' focused=focused color=focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR />
        
      ,
      TAB_ACTIVITIES: 
        screen: Screen3,
        navigationOptions: 
            
          tabBarLabel: 'Screen3'
          tabBarIcon: ( focused ) => <Icon name='paper' focused=focused color=focused ? ACTIVE_TAB_COLOR : INACTIVE_TAB_COLOR/>
        
      
    ,
    
      tabBarPosition: 'bottom',
      swipeEnabled: false,
      animationEnabled: false,
      tabBarOptions: 
        activeTintColor: ACTIVE_TAB_COLOR,
        inactiveTintColor: INACTIVE_TAB_COLOR,
        showLabel: true,
        style: 
          borderTopWidth: 0,
          paddingTop: 3,
          paddingBottom: 4,
          height: 60,
          shadowColor: '#000',
          shadowOpacity: 0.1,
          shadowRadius: 20,
          shadowOffset:  width: 0, height: 0 
        
      
    )