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>
相关推荐
游戏开发爱好者83 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
zhangphil10 小时前
HARDWARE 属性的Bitmap与普通Bitmap,GPU与RenderThread渲染与处理方式异同比较,Android
android
消失的旧时光-194311 小时前
Flutter 异步编程:Future 与 Stream 深度解析
android·前端·flutter
alexhilton12 小时前
Compose CameraX现已稳定:给Composer的端到端指南
android·kotlin·android jetpack
阿里云云原生14 小时前
移动端性能监控探索:可观测 Android 采集探针架构与实现
android
雨白14 小时前
玩转 Flow 操作符(一):数据转换与过滤
android·kotlin
二流小码农14 小时前
鸿蒙开发:web页面如何适配深色模式
android·ios·harmonyos
Amy_cx15 小时前
搭建React Native开发环境
javascript·react native·react.js
消失的旧时光-194316 小时前
TCP 流通信中的 EOFException 与 JSON 半包问题解析
android·json·tcp·数据
JiaoJunfeng17 小时前
android 8以上桌面图标适配方案(圆形)
android·图标适配