在 react-native 中为自定义导航栏添加边距答案

【问题标题】：Add a margin to the custom navbar in react-native在 react-native 中为自定义导航栏添加边距
【发布时间】：2021-09-15 06:55:03
【问题描述】：

我创建了一个自定义导航栏，它看起来很棒。它显示在屏幕上的唯一问题是，我希望它像普通导航栏一样显示。那么，有没有办法为导航栏添加边距而不是为每个屏幕添加边距？

这是我的实现：

<Tab.Navigator
      initialRouteName="Home"
      animationEnabled={false}
      tabBar={(props) => <CustomBottomNavbar {...props} avatar={avatar} />}
      tabBarOptions={{
        activeTintColor: Colors.orange,
        inactiveTintColor: Colors.gray,
        showLabel: false,
        showIcon: true,
        tabStyle: {
          marginTop: hp(1.5),
        },
        keyboardHidesTabBar: true,
      }}>
      {tabScreens}
    </Tab.Navigator>

我在tabStyle 中的所有内容都不起作用

它看起来像这样：

【问题讨论】：

你可以在标签导航器上定义一个默认的屏幕选项
我该怎么做@ucup？

标签： react-native react-native-android react-native-ios react-native-navigation

【解决方案1】：

您可以在tabBarOptions 中使用style

   <Tab.Navigator
      initialRouteName="Home"
      animationEnabled={false}
      tabBar={(props) => <CustomBottomNavbar {...props} avatar={avatar} />}
      tabBarOptions={{
        activeTintColor: Colors.orange,
        inactiveTintColor: Colors.gray,
        showLabel: false,
        showIcon: true,
        style: {
          marginTop: 10,
        },
        keyboardHidesTabBar: true,
      }}>
      {tabScreens}
    </Tab.Navigator>

【讨论】：