自定义标签栏而不是反应导航答案

【问题标题】：custom Tab Bar instead of react Navigation自定义标签栏而不是反应导航
【发布时间】：2021-10-15 06:38:10
【问题描述】：

可以在 react native 中创建自己的导航标签栏而不是使用 react 导航。我想从头开始创建一些东西，这样我就不必学习反应导航技术。

【问题讨论】：

学习反应导航比自己做要容易得多。 React 导航提供了使用 tabBar 属性定义自定义标签栏的能力 -> reactnavigation.org/docs/bottom-tab-navigator

【解决方案1】：

正如 Michael Bahl 已经指出的那样，在软件开发中使用框架可以让您在更短的时间内获得更多功能。如果你足够幸运，你甚至可以得到一个经过良好测试的。

也就是说，反应导航提供了轻松自定义某些导航元素的能力。

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

const Tab = createBottomTabNavigator();

const CustomTabNavigator = () => {
  return (
    <Tab.Navigator
      initialRouteName="HomeTab"
      screenOptions={{headerShown: false, tabBarShowLabel: false}}>
      <Tab.Screen
        name="NavigationTab"
        component={MyScreen}
        options={{
          tabBarIcon: ({color}) => <TabBarIcon name="compass" color={color} />,
        }}
       />
     </Tab.Navigator>  
   );
};

export default CustomTabNavigator;

Material Top Tabs 和更多导航器也是如此，它们甚至提供了一个 API 用于自定义。 :-)

【讨论】：