反应原生：设置标签导航 5 样式的方法是什么？

Question

i am use navigation 5 and i wanna style my tab navigator what is the way to :

1.Create a view over the tabs ? 2. color the tabs and color the background of them ?

const Tab = createMaterialTopTabNavigator();

export default function Screen8() {
  const navigation = useNavigation();
  const route = useRoute();
  const params = route.params;
  const { item } = params;
  console.log('screen 8: ', params);
  return (
    <Tab.Navigator>
      <Tab.Screen name="frog" component={NetuneyDigum} />
      <Tab.Screen name="bomb" component={BdikotSadea} />
      <Tab.Screen name="zibi" component={E_BitsuaDigdum} />
    </Tab.Navigator>
  );
}

Answer 1

In your Tab.Navigator

<Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
        })}
        tabBarOptions={{
          activeTintColor: 'tomato',
          inactiveTintColor: 'gray',
        }}
      >...</Tab.Navigator>

More info in the docs https://reactnavigation.org/docs/tab-based-navigation

Answer 2

Just figured out the solution for this as the docs didn't work for me. You have to add the tabBarOptions attribute to Tab.Navigator then put your styles in there. I included how to add icons as well in case you need that, but if you don't need it just remove that

const Tab = createBottomTabNavigator()
const TabNavigator = () => {
    return(
        <Tab.Navigator
            tabBarOptions={{ 
                activeTintColor: '#D82A93',
                labelStyle: {
                    fontSize: 12,
                },
                style: {
                    height: 84,
                },
                tabStyle: {
                    height: 60,
                },
            }}
            screenOptions={({ route }) => ({
                tabBarIcon: ({ focused, color, size }) => {
                    let iconName;
                    let type='material-community'
                    if (route.name === 'Home') {
                        iconName = 'home-outline'
                    } else if (route.name === 'Grow') {
                        iconName = 'flower-outline'
                    } else if (route.name === 'Events') {
                        iconName = 'calendar-clock'
                    } else if (route.name === 'Discussion') {
                        iconName = 'comment-discussion'
                        type = 'octicon'
                    } else {
                        iconName = 'flag-variant-outline'
                    }
                    return <Icon type={type} name={iconName} size={35} color={color}  />;
                },
            })}
        >
            <Tab.Screen name='Home' component={StackNavigator} />
            <Tab.Screen name="Grow" component={Grow} options={{headerShown: false}} />
            <Tab.Screen name="Events" component={SettingsScreen} options={{headerShown: false}} />
            <Tab.Screen name="Discussion" component={SettingsScreen} options={{headerShown: false}} />
            <Tab.Screen name="Progress" component={SettingsScreen} options={{headerShown: false}} />
        </Tab.Navigator>
    )
}