反应原生：标签导航风格

Question

Is there a way to change the style just of the ORANGE tab? Well I would be happy to know what is the way to handle such a situation. I tried in several ways to change the style of the ORANGE. I use navigation 5 in my app.

<Tab.Navigator
        tabBarOptions={{
          activeTintColor: 'white',
          inactiveTintColor: Colors.background_color,
          indicatorStyle: {
            backgroundColor: 'red',
            height: 5,
          },
          style: {
            elevation: 10,
            backgroundColor: Colors.background_2,
          },
          labelStyle: {
            fontSize: 18,
            fontWeight: 'bold',
          },
        }}
        backBehavior="none"
      >
        <Tab.Screen
          name="APPLE"
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        >
          {() => <NetuneyDigum item={item} />}
        </Tab.Screen>
        <Tab.Screen
          name="ORANGE"
          component={BitzuaBdikotSadea}
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        // initialParams={{ updateRecentFieldInput }} used for parameters not function
        />
        <Tab.Screen
          name="BANANA"
          component={E_BitsuaDigdum}
          listeners={({ route }) => ({
            focus: () => {
              setCurrentTabName(route.name);
            },
          })}
        />
      </Tab.Navigator>

Answer 1

It depends exactly what you want to change but you can absolutely configure the icon and text per Screen in your Tab Bar Navigator using the options parameter.

<Tab.Screen
  name="ORANGE"
  component={BitzuaBdikotSadea}
  listeners={({ route }) => ({
    focus: () => {
      setCurrentTabName(route.name);
    },
  })}
  options={{
    tabBarLabel: () => <Text>My Custom Label</Text>,
    tabBarIcon: () => <MyCustomIcon />
  }}
// initialParams={{ updateRecentFieldInput }} used for parameters not function
/>

You can pass more props such as "focused" to have more dynamic styling like changing colour when that tab is active. Example: tabBarLabel: ({ focused }) => <MyCustomText focused={focused}>Custom Label</MyCustomText>

Full list of options are documented here: https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/#options