React Native 基础tabBar和自定义tabBar - bottom-tabs

一、基础TabBar

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

// ...
const BottomTabBar = createBottomTabNavigator()

return (
    <View style={{width: '100%', height: '100%'}}>
        <BottomTabBar.Navigator
            screenOptions={({route}) => {
                console.log('res:', route)
                return {
                    tabBarIcon: ({focused, color, size}) => {
                    let name = focused ? `${route.name}Active` : route.name
                     return (
                         <Image 
                             style={{width: size, height: size, tintColor: color}}
                             source={IconTabMap[name]} />
                     )
                    }
                }
            }}  
             
        >
            <BottomTabBar.Screen
                name='Home'
                component={Home}
                options={{
                    title: '首页',
                    headerShown: false,
                    tabBarActiveTintColor: '#ff2442',
                    tabBarInactiveTintColor: '#999'
                }}
            />
            <BottomTabBar.Screen
                name='Shop'
                component={Shop}
                options={{
                    title: '购物车',
                    headerShown: false,
                    tabBarActiveTintColor: '#ff2442',
                    tabBarInactiveTintColor: '#999'
                }}
            />
            <BottomTabBar.Screen
                name='Message'
                component={Message}
                options={{
                    title: '消息',
                    headerShown: false,
                    tabBarActiveTintColor: '#ff2442',
                    tabBarInactiveTintColor: '#999'
                }}
            />
            <BottomTabBar.Screen
                name='Mine'
                component={Mine}
                options={{
                    title: '我的',
                    headerShown: false,
                    tabBarActiveTintColor: '#ff2442',
                    tabBarInactiveTintColor: '#999'
                }}
            />
        </BottomTabBar.Navigator>
    </View>
)

二、自定义TabBar

const TabBarRender = ({state, descriptors, navigation}) => {
  // index：当前选中
  const { routes, index } = state

  return (
      <View style={styles.tabBar}>
          {
              routes.map((route, i) => {
                  // route -> {key, name, params}
                  // descriptors->{key值： {navigation, options(Screen上的options值), route, render}}
                  console.log('descriptors', descriptors[route.key])
                  const { options: { title } } = descriptors[route.key]
                  const isActive = index === i

                  if (i === 2) {
                      return (
                          <TouchableOpacity
                              activeOpacity={0.7}
                              onPress={() => {
                                  // ....
                              }}
                          >
                              <Image
                                  style={styles.img}
                                  source={IconAdd}
                              />
                          </TouchableOpacity>
                      )
                  }

                  return (
                      <TouchableOpacity
                          style={styles.tabItem}
                          key={`tab-item-${i}`}
                          activeOpacity={0.7}
                          onPress={() => {
                              navigation.navigate(route.name)
                          }}
                      >
                          <Text style={[styles.text, isActive ? styles.textActive : {}]}>
                              { title }
                          </Text>
                      </TouchableOpacity>
                  )
              })
          }
      </View>
      
  )

}



// ...
<BottomTabBar.Navigator
    tabBar={props => <TabBarRender {...props} />} // 自定义
>
    <BottomTabBar.Screen
        name='Home'
        component={Home}
        options={{
            title: '首页',
            headerShown: false,
        }}
    />
    <BottomTabBar.Screen
        name='Shop'
        component={Shop}
        options={{
            title: '购物车',
            headerShown: false,
        }}
    />
    <BottomTab.Screen
        name='Add'
        component={Shop}
        options={{
            title: '新增',
            headerShown: false,
        }}
    />
    <BottomTabBar.Screen
        name='Message'
        component={Message}
        options={{
            title: '消息',
            headerShown: false,
        }}
    />
    <BottomTabBar.Screen
        name='Mine'
        component={Mine}
        options={{
            title: '我的',
            headerShown: false,
        }}
    />
</BottomTabBar.Navigator>