如何为React Native自定义导航Tab添加激活状态

Hey there! I see you've been stuck on adding active styling to your tabs for three days—let's get this sorted out right away. The core issue here is that we need to dynamically apply a different style to the tab that matches the current index in your component state.

Here's how to fix it step by step:

Step 1: Add an Active Style Definition #

First, let's add a new style for the active tab text in your StyleSheet.create block. This will define what the active tab looks like (we'll use a darker color here, but you can change it to whatever you want):

activeTabText: {
  color: "#000000" // Or your preferred active color
}

Step 2: Dynamically Apply the Active Style #

Next, for each tab's <Text> component, we'll check if the tab's index matches the index in state. If it does, we'll combine the base tabText style with the new activeTabText style.

Also, I'll tweak your setIndex method to be an arrow function to avoid any potential this binding issues (this is a common gotcha in class components!).

Modified App.js Code #

Here's your full updated code with all the fixes:

import React, { Fragment } from "react";
import { StyleSheet, View, TouchableOpacity, Text } from "react-native";
import Gator from "../Gator";
import Croco from "../Croco";
import Style from "../Style";

class App extends React.Component {
  state = { index: 0 };

  getTab = index => {
    switch (index) {
      case 0:
        return <Gator />;
      case 1:
        return <Croco />;
      case 2:
        return <Style />;
      default:
        return <Croco />;
    }
  };

  // Changed to arrow function to avoid this binding issues
  setIndex = (int) => {
    this.setState({ index: int });
  };

  render() {
    const { index } = this.state; // Destructure index for cleaner code
    return (
      <Fragment>
        <View style={style.tabsWrapper}>
          <View style={style.tabsContainer}>
            <TouchableOpacity onPress={() => this.setIndex(0)}>
              <View style={style.tabItem}>
                {/* Check if current index matches tab index to apply active style */}
                <Text style={[style.tabText, index === 0 && style.activeTabText]}>Croco</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(1)}>
              <View style={style.tabItem}>
                <Text style={[style.tabText, index === 1 && style.activeTabText]}>Gator</Text>
              </View>
            </TouchableOpacity>
            <TouchableOpacity onPress={() => this.setIndex(2)}>
              <View style={style.tabItem}>
                <Text style={[style.tabText, index === 2 && style.activeTabText]}>Style</Text>
              </View>
            </TouchableOpacity>
          </View>
        </View>
        <View>{this.getTab(index)}</View>
      </Fragment>
    );
  }
}

const style = StyleSheet.create({
  tabsWrapper: {
    backgroundColor: "#eeeeee",
    width: "100%",
    height: "5%",
    borderBottomColor: "#cccccc",
    borderBottomWidth: 2,
    marginBottom: 20
  },
  tabsContainer: {
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    padding: 5,
    paddingTop: 10,
    marginLeft: 30,
    marginRight: 30,
    paddingBottom: 0,
    height: "20%"
  },
  tabItem: {
    alignItems: "center"
  },
  tabText: {
    fontFamily: "DINRoundPro-Bold",
    fontSize: 16,
    color: "#aaaaaa"
  },
  // New active tab style
  activeTabText: {
    color: "#000000"
  }
});

export default App;

Key Changes Explained: #

• Arrow function for setIndex: Ensures this refers to the component instance correctly, so setState works as expected.
• Destructured index from state: Makes the code cleaner and easier to read.
• Dynamic style array: For each tab text, we use an array of styles. When index === tabIndex is true, React Native will merge activeTabText with tabText, overriding the color property.
• Added activeTabText style: Defines the color for the active tab (you can customize this to any color, or even add other properties like fontWeight if you want).

Testing It Out #

Just paste this updated code into your React Native sandbox, and you should see that when you tap a tab, its text color changes to the active color you defined. The currently selected tab will stay highlighted while others remain in the default gray.

Keep up the great work with your React Native project—you're doing awesome for only two weeks in! 😎

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