reactjs - 无法使用自定义标签栏反应原生

Question

我正在尝试使用创建自定义标签栏，@react-navigation/material-bottom-tabs但我无法编辑整个标签栏这是我的代码：

import { createMaterialBottomTabNavigator } from '@react-navigation/material-bottom-tabs';

const Tab = createMaterialBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

标签： reactjstabsnative

Answer 1

你可以使用renderLabelandrenderIcon方法，如果你想使用tabBar，你需要使用@react-navigation/bottom-tabs而不是@react-navigation/material-bottom-tabs这样：

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBar={props => <MyTabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}