当前位置：首页 > news >正文

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

news 2025/7/18 8:14:39

一、基础TabBar

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

在这里插入图片描述

二、自定义TabBar

const TabBarRender = ({state, descriptors, navigation}) => {// index：当前选中const { routes, index } = statereturn (<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 === iif (i === 2) {return (<TouchableOpacityactiveOpacity={0.7}onPress={() => {// ....}}><Imagestyle={styles.img}source={IconAdd}/></TouchableOpacity>)}return (<TouchableOpacitystyle={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.NavigatortabBar={props => <TabBarRender {...props} />} // 自定义
><BottomTabBar.Screenname='Home'component={Home}options={{title: '首页',headerShown: false,}}/><BottomTabBar.Screenname='Shop'component={Shop}options={{title: '购物车',headerShown: false,}}/><BottomTab.Screenname='Add'component={Shop}options={{title: '新增',headerShown: false,}}/><BottomTabBar.Screenname='Message'component={Message}options={{title: '消息',headerShown: false,}}/><BottomTabBar.Screenname='Mine'component={Mine}options={{title: '我的',headerShown: false,}}/>
</BottomTabBar.Navigator>