React Navigation：如何在TabBar中嵌入按钮？React Native新手求助

Hey there! Since you're new to React Native and stuck on adding a button to your TabBar, let’s break down a few practical, easy-to-follow approaches that’ll help you get that custom TabBar up and running.

If you’re using React Navigation (the go-to navigation library for RN), you can build a fully custom TabBar component and pass it to your BottomTabNavigator. This gives you full control to add buttons wherever you need.

Here’s a step-by-step example:
First, import the necessary components:

import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

Next, create your custom TabBar component:

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={styles.tabBarContainer}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel || options.title || route.name;
        const isFocused = state.index === index;

        // Handle regular tab presses
        const onPress = () => {
          const event = navigation.emit({ type: 'tabPress', target: route.key });
          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        // Render custom button at the 3rd position (adjust index as needed)
        if (index === 2) {
          return (
            <TouchableOpacity
              key={route.key}
              onPress={() => {
                // Add your button logic here (e.g., open a modal, trigger an action)
                alert('Custom button tapped!');
              }}
              style={styles.customButton}
            >
              <Text style={styles.buttonText}>+</Text>
            </TouchableOpacity>
          );
        }

        // Render regular tab items
        return (
          <TouchableOpacity
            key={route.key}
            onPress={onPress}
            style={styles.tabItem}
          >
            <Text style={{ color: isFocused ? '#673ab7' : '#222' }}>
              {label}
            </Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

Then, set up your TabNavigator with the custom bar:

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBar={(props) => <CustomTabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
      {/* Hide the default tab button for the custom position */}
      <Tab.Screen 
        name="Add" 
        component={() => null} 
        options={{ tabBarButton: () => null }} 
      />
      <Tab.Screen name="Messages" component={MessagesScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Add some styling to make it look polished:

const styles = StyleSheet.create({
  tabBarContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    alignItems: 'center',
    height: 60,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  customButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#673ab7',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: -20, // Makes the button pop above the TabBar
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5, // Android shadow
  },
  buttonText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
});

If you don’t want to build everything from scratch, libraries like react-native-paper or react-native-tab-view have built-in support for custom TabBar items. Here’s a quick example with react-native-paper:

import { useState } from 'react';
import { BottomNavigation, Button } from 'react-native-paper';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

const MyTabBar = () => {
  const [index, setIndex] = useState(0);
  const routes = [
    { key: 'home', title: 'Home', icon: 'home' },
    // Inject a button directly into the TabBar
    { 
      key: 'add', 
      title: '', 
      icon: () => (
        <Button 
          mode="contained" 
          onPress={() => alert('Add button pressed!')}
          style={{ borderRadius: 30, width: 60, height: 60 }}
        >
          +
        </Button>
      )
    },
    { key: 'profile', title: 'Profile', icon: 'account' },
  ];

  const renderScene = BottomNavigation.SceneMap({
    home: HomeScreen,
    add: () => null, // Empty component since we just need the button
    profile: ProfileScreen,
  });

  return (
    <BottomNavigation
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
};

If you’re not using any navigation library, you can create a simple TabBar with basic RN components. This is great if you want full control without dependencies:

import { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';
import MessagesScreen from './MessagesScreen';
import SettingsScreen from './SettingsScreen';

const App = () => {
  const [activeTab, setActiveTab] = useState('home');

  // Render the active screen
  const renderScreen = () => {
    switch(activeTab) {
      case 'home': return <HomeScreen />;
      case 'profile': return <ProfileScreen />;
      case 'messages': return <MessagesScreen />;
      case 'settings': return <SettingsScreen />;
      default: return <HomeScreen />;
    }
  };

  return (
    <View style={{ flex: 1 }}>
      {renderScreen()}
      {/* Custom TabBar */}
      <View style={styles.tabBar}>
        <TouchableOpacity onPress={() => setActiveTab('home')} style={styles.tabItem}>
          <Text style={{ color: activeTab === 'home' ? '#673ab7' : '#222' }}>Home</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setActiveTab('profile')} style={styles.tabItem}>
          <Text style={{ color: activeTab === 'profile' ? '#673ab7' : '#222' }}>Profile</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => alert('Add button tapped!')} style={styles.addButton}>
          <Text style={styles.buttonText}>+</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setActiveTab('messages')} style={styles.tabItem}>
          <Text style={{ color: activeTab === 'messages' ? '#673ab7' : '#222' }}>Messages</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => setActiveTab('settings')} style={styles.tabItem}>
          <Text style={{ color: activeTab === 'settings' ? '#673ab7' : '#222' }}>Settings</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  tabBar: {
    flexDirection: 'row',
    height: 60,
    backgroundColor: '#fff',
    borderTopWidth: 1,
    borderTopColor: '#eee',
    justifyContent: 'space-around',
    alignItems: 'center',
  },
  tabItem: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  addButton: {
    width: 60,
    height: 60,
    borderRadius: 30,
    backgroundColor: '#673ab7',
    justifyContent: 'center',
    alignItems: 'center',
    position: 'absolute',
    top: -20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
});

Pick the approach that fits your project best! If you’re already using React Navigation, go with the first method—it integrates seamlessly. For a quick win, the third-party library route is perfect, and building from scratch gives you total control.

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