请求协助实现React Native自定义底部导航栏（附参考UI）

如果你找不到合适的第三方库，直接用React Native原生组件搭建是最灵活的方案，完全可以自定义成你需要的样式。下面是一个基础实现示例：

自定义底部导航栏组件 #

import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';

// 配置导航项，可根据需求修改图标、文字
const tabItems = [
  { label: '首页', icon: '🏠' },
  { label: '发现', icon: '🔍' },
  { label: '我的', icon: '👤' },
];

const BottomTabBar = ({ onTabChange }) => {
  const [activeIndex, setActiveIndex] = useState(0);

  const handleTabPress = (index) => {
    setActiveIndex(index);
    onTabChange(index);
  };

  return (
    <View style={styles.tabBarContainer}>
      {tabItems.map((item, index) => (
        <TouchableOpacity
          key={index}
          style={[
            styles.tabItem,
            activeIndex === index && styles.activeTabItem,
          ]}
          onPress={() => handleTabPress(index)}
        >
          <Text style={[styles.tabIcon, activeIndex === index && styles.activeTabIcon]}>
            {item.icon}
          </Text>
          <Text style={[styles.tabLabel, activeIndex === index && styles.activeTabLabel]}>
            {item.label}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );
};

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 60,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#e0e0e0',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: -2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 5, // 安卓端阴影效果
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: 8,
  },
  activeTabItem: {
    // 选中项的背景样式，可按需修改
    backgroundColor: '#f5f5f5',
    borderRadius: 10,
    marginHorizontal: 8,
  },
  tabIcon: {
    fontSize: 24,
    color: '#999',
  },
  activeTabIcon: {
    color: '#1677ff', // 选中时的图标颜色
  },
  tabLabel: {
    fontSize: 12,
    color: '#999',
    marginTop: 4,
  },
  activeTabLabel: {
    color: '#1677ff',
    fontWeight: 'bold',
  },
});

export default BottomTabBar;

在主组件中使用导航栏 #

import React, { useState } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomTabBar from './BottomTabBar';

// 示例页面组件
const HomeScreen = () => <Text style={styles.screenText}>首页内容</Text>;
const DiscoverScreen = () => <Text style={styles.screenText}>发现内容</Text>;
const ProfileScreen = () => <Text style={styles.screenText}>我的内容</Text>;

const App = () => {
  const [currentScreen, setCurrentScreen] = useState(0);

  // 根据选中的标签渲染对应页面
  const renderCurrentScreen = () => {
    switch (currentScreen) {
      case 0:
        return <HomeScreen />;
      case 1:
        return <DiscoverScreen />;
      case 2:
        return <ProfileScreen />;
      default:
        return <HomeScreen />;
    }
  };

  return (
    <View style={styles.container}>
      <View style={styles.contentArea}>
        {renderCurrentScreen()}
      </View>
      {/* 底部导航栏 */}
      <BottomTabBar onTabChange={setCurrentScreen} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f0f0',
  },
  contentArea: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  screenText: {
    fontSize: 20,
    color: '#333',
  },
});

export default App;

自定义调整建议 #

• 图标替换：如果需要更专业的图标，可以使用react-native-vector-icons，安装后直接替换示例中的emoji图标即可
• 样式修改：可以根据需求调整导航栏高度、背景色、选中态的边框/阴影、文字大小等
• 动画增强：如果需要切换时的过渡动画，可以引入Animated组件给选中项添加缩放、颜色渐变效果

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