React Native带加号底部导航（Bottom Bar）实现方法咨询

一、核心实现方案选择 #

• 手动自定义：用react-native原生的View、TouchableOpacity、Image、Text组件搭建，完全可控样式，适合高度定制的场景。
• 第三方库快速落地：优先选@react-navigation/bottom-tabs（React Navigation生态组件），基础结构现成，只需自定义样式适配需求；复杂场景可考虑react-native-tab-view。

二、样式适配要点（匹配参考图片特征） #

从图片推测需实现的样式细节：

• 选中项高亮：图标/文字变色，或添加顶部高亮条、背景色区分
• 垂直布局：每个导航项是图标+文字的垂直排列结构
• 安全区适配：iOS设备用SafeAreaView包裹，避免底部横条遮挡
• 层次感：导航栏顶部加圆角和轻微阴影

手动实现样式示例代码 #

import { View, TouchableOpacity, Image, Text, SafeAreaView, StyleSheet } from 'react-native';

const BottomNav = ({ activeTab, onTabPress }) => {
  const tabs = [
    { id: 'home', icon: require('./assets/home.png'), label: '首页' },
    { id: 'order', icon: require('./assets/order.png'), label: '订单' },
    { id: 'profile', icon: require('./assets/profile.png'), label: '我的' },
  ];

  return (
    <SafeAreaView style={styles.navContainer}>
      <View style={styles.navWrapper}>
        {tabs.map(tab => (
          <TouchableOpacity
            key={tab.id}
            style={styles.tabItem}
            onPress={() => onTabPress(tab.id)}
          >
            <Image
              source={tab.icon}
              style={[styles.tabIcon, activeTab === tab.id && styles.activeIcon]}
            />
            <Text
              style={[styles.tabLabel, activeTab === tab.id && styles.activeLabel]}
            >
              {tab.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  navContainer: {
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3, // Android阴影适配
  },
  navWrapper: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    paddingVertical: 8,
  },
  tabItem: {
    alignItems: 'center',
    flex: 1,
  },
  tabIcon: {
    width: 24,
    height: 24,
    tintColor: '#999',
  },
  activeIcon: {
    tintColor: '#1677ff', // 选中态颜色
  },
  tabLabel: {
    fontSize: 12,
    color: '#999',
    marginTop: 4,
  },
  activeLabel: {
    color: '#1677ff',
    fontWeight: '500',
  },
});

export default BottomNav;

三、状态与页面切换处理 #

• 简单场景：用组件内部useState管理当前选中标签，配合条件渲染切换页面
• 复杂路由场景：用React Navigation的BottomTabNavigator自动处理路由，示例：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import HomeScreen from './HomeScreen';
import OrderScreen from './OrderScreen';
import ProfileScreen from './ProfileScreen';

const Tab = createBottomTabNavigator();

const AppNavigator = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;
          switch(route.name) {
            case '首页':
              iconName = focused ? 'home-sharp' : 'home-outline';
              break;
            case '订单':
              iconName = focused ? 'list-sharp' : 'list-outline';
              break;
            case '我的':
              iconName = focused ? 'person-sharp' : 'person-outline';
              break;
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarLabel: ({ focused, color }) => (
          <Text style={{ color, fontSize: 12 }}>{route.name}</Text>
        ),
        tabBarStyle: {
          borderTopLeftRadius: 20,
          borderTopRightRadius: 20,
          elevation: 3,
          shadowOpacity: 0.1,
        },
        tabBarActiveTintColor: '#1677ff',
        tabBarInactiveTintColor: '#999',
      })}
    >
      <Tab.Screen name="首页" component={HomeScreen} />
      <Tab.Screen name="订单" component={OrderScreen} />
      <Tab.Screen name="我的" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

四、细节优化 #

• 交互反馈：给TouchableOpacity设置activeOpacity，或用Pressable自定义按压效果
• 图标清晰度：用矢量图标库（如react-native-vector-icons）或多分辨率图片
• 动画增强：用Animated组件给选中项添加缩放/颜色过渡动画

内容的提问来源于stack exchange，提问作者Sidali