如何在React Native多页面中创建不同的顶部标签栏

Hey there! I get that reusing code when you're still building up your JavaScript foundation can feel tricky, but let's make this simple. The core idea is to wrap your common tab navigator configuration into a reusable function—that way you can create new tab bars with the same structure but different tab titles/screens without copying all the code every time.

Step 1: Create a Reusable Tab Navigator Function #

First, make a separate file (like CustomTopTabNavigator.js) where you'll put all the shared configuration. This function will take in your specific tab setup (titles + screens) and optional custom tweaks, then return a fully configured navigator.

import { createMaterialTopTabNavigator } from 'react-navigation';

// Reusable function to create top tab navigators with your default style
export const createCustomTopTabNavigator = (tabsConfig, customOptions = {}) => {
  // Your original fixed configuration goes here
  const defaultOptions = {
    swipeEnabled: true,
    navigationOptions: ({ navigation }) => ({ header: null }),
    tabBarOptions: {
      activeTintColor: '#65FAE9',
      inactiveTintColor: 'white',
      allowFontScaling: true,
      indicatorStyle: { borderBottomColor: '#65FAE9', borderBottomWidth: 4 },
      style: { backgroundColor: '#515276', paddingBottom: 5 },
      labelStyle: { fontWeight: 'bold', marginTop: '40%' },
    },
    ...customOptions // Let's you override default settings if needed
  };

  // Set initial route to your first tab by default (you can adjust this)
  if (!defaultOptions.initialRouteName) {
    defaultOptions.initialRouteName = Object.keys(tabsConfig)[0];
  }

  return createMaterialTopTabNavigator(tabsConfig, defaultOptions);
};

Step 2: Recreate Your Original Tab Bar #

Now go back to your original file and replace the old code with a call to this reusable function. It'll behave exactly the same as before, but now you're using the shared logic.

// In your original Newsfeed/Services tab file
import { createCustomTopTabNavigator } from './CustomTopTabNavigator'; // Update the path as needed
import NewsfeedActivity from './NewsfeedActivity';
import ServiceActivity from './ServiceActivity';

export default createCustomTopTabNavigator(
  {
    Newsfeed: { screen: NewsfeedActivity },
    Services: { screen: ServiceActivity }
  },
  {
    initialRouteName: 'Services' // Keep your original initial route here
  }
);

Step 3: Create a New Tab Bar with Different Titles #

In your new independent JS file, just import the same reusable function and pass in your new tab titles and corresponding screen components. That's it—you'll get the exact same tab bar style with your new labels!

// In your new tab bar file (e.g., ProfileSettingsTabs.js)
import { createCustomTopTabNavigator } from './CustomTopTabNavigator';
import ProfileActivity from './ProfileActivity'; // Your new screen
import SettingsActivity from './SettingsActivity'; // Your new screen

export default createCustomTopTabNavigator({
  Profile: { screen: ProfileActivity },
  Settings: { screen: SettingsActivity }
});

Bonus: Tweak Config for Specific Tabs (If Needed) #

If you ever need one tab bar to have a small change (like a different active color), just pass those tweaks as the second argument. The function will merge them with the default settings:

// Example: A tab bar with a different active tint color
export default createCustomTopTabNavigator(
  {
    Messages: { screen: MessagesActivity },
    Notifications: { screen: NotificationsActivity }
  },
  {
    tabBarOptions: {
      activeTintColor: '#FF6B6B', // Override the default blue
      style: { backgroundColor: '#2D3748' } // Override background color
    }
  }
);

This approach keeps your code DRY (Don't Repeat Yourself) and makes it super easy to create as many consistent tab bars as you need—no more copying and pasting big blocks of configuration!

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