反应原生：标签导航样式答案

【问题标题】：react native : tab navigation style反应原生：标签导航样式
【发布时间】：2022-01-17 17:57:48
【问题描述】：

有没有办法改变 ORANGE 标签的样式？好吧，我很高兴知道处理这种情况的方法是什么。我尝试了几种方法来改变 ORANGE 的风格。我在我的应用中使用导航 5。

<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>

【问题讨论】：

标签： javascript reactjs react-native react-navigation

【解决方案1】：

这完全取决于您要更改的内容，但您完全可以使用options 参数在标签栏导航器中配置每个屏幕的图标和文本。

<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
/>

您可以传递更多的道具，例如“focused”，以获得更多动态样式，例如在该选项卡处于活动状态时更改颜色。例子： tabBarLabel: ({ focused }) => <MyCustomText focused={focused}>Custom Label</MyCustomText>

此处记录了完整的选项列表：https://reactnavigation.org/docs/5.x/material-bottom-tab-navigator/#options

【讨论】：