【问题标题】:Cannot use custom tab bar react native无法使用自定义标签栏反应原生
【发布时间】:2021-10-27 06:58:03
【问题描述】:

我正在尝试使用 @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>
  );
}

【问题讨论】:

    标签: reactjs tabs native


    【解决方案1】:

    你可以使用renderLabelrenderIcon方法,如果你想使用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>
      );
    }
    
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2019-03-01
      • 2022-01-22
      • 2019-12-15
      • 2020-09-16
      • 1970-01-01
      • 2020-10-28
      • 1970-01-01
      相关资源
      最近更新 更多