在 React native 中創建自定義底部選項卡導航器

Question

大家好，我想在 React Native 中創建時尚且自定義的底部選項卡導航，任何人都知道如何在上面創建這個提及

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

Answer 2

在 React Navigation V5 中，有一個 Tab.Navigator 組件的道具，你可以傳遞整個自定義底部欄組件

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

Answer 3

很好的解釋和很好的例子，使用反應導航使用自定義標簽欄

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

Answer 4

看看這個很棒的框架 React-Native-Tab-View。

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

只需使用tabBarPosition: bottom並根據需要呈現您的選項卡。

Answer 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 }
        }
      }
    })