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

一、基础TabBar
javascript 复制代码
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
javascript 复制代码
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>
相关推荐
游戏开发爱好者89 小时前
iOS 26 崩溃日志深度解读,获取方式、系统变动、定位策略
android·macos·ios·小程序·uni-app·cocoa·iphone
一直向钱9 小时前
android 基于okhttp 封装一个websocket管理模块,方便开发和使用
android·websocket·okhttp
小趴菜822710 小时前
安卓人机验证View
android·java·前端
ajassi200011 小时前
开源 java android app 开发(十七)封库--混淆源码
android·java·开源
2501_9160088911 小时前
JavaScript调试工具有哪些?常见问题与常用调试工具推荐
android·开发语言·javascript·小程序·uni-app·ecmascript·iphone
2501_9293826512 小时前
AdGuard解锁订阅版高级版 安卓广告拦截器APP v4.11.63 / 4.13.7 Nightly MOD
android
vistaup13 小时前
android studio 无法运行java main()
android·java·android studio
sxczst14 小时前
Launcher3 如何实现长按后可拖动?
android
诺诺Okami15 小时前
Android Framework-WMS-Window移除
android
小趴菜822718 小时前
Android TabLayout使用记录
android