反应本机：选项卡导航样式

Question

有没有办法改变 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>

Answer 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

反应本机：选项卡导航样式

react native : tab navigation style

javascript

reactjs

react-native

react-navigation