时间戳

首页 > 解决方案 > 自定义标签栏而不是反应导航

react-native - 自定义标签栏而不是反应导航

问题描述

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

标签： react-nativereact-navigation

解决方案

正如 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。:-)

推荐阅读