当当前选项卡在反应导航中处于活动状态时，如何在底部选项卡顶部添加一行 5 [英] How to add a line at top of the bottom tab when the current tab is active in react navigation 5

问题描述

我想在底部标签的顶部添加一行，如何添加?像这个问题 https://github.com/react-navigation/react-navigation/issues/8957

I want to add the line at the top of the bottom tabs, how to add this? like this issue https://github.com/react-navigation/react-navigation/issues/8957

React 导航版本:

React navigation versions:

"@react-navigation/bottom-tabs": "^5.9.2",
"@react-navigation/native": "^5.7.6",
"@react-navigation/stack": "^5.9.3",
"react": "16.13.1",
"react-native": "0.63.3",

推荐答案

您可以使用如下自定义按钮

You can use a custom button like below

const CustomTabButton = (props) => (
  <TouchableOpacity
    {...props}
    style={
      props.accessibilityState.selected
        ? [props.style, { borderTopColor: 'red', borderTopWidth: 2 }]
        : props.style
    }
  />
);

并在初始化导航时将其作为 tabBarButton 提供.

And provide it as the tabBarButton when initializing the navigation.

<Tab.Navigator>
  <Tab.Screen
    name="Home"
    component={HomeScreen}
    options={{
      tabBarButton: CustomTabButton,
    }}
  />
  <Tab.Screen
    name="Settings"
    component={SettingsScreen}
    options={{
      tabBarButton: CustomTabButton,
    }}
  />
</Tab.Navigator>

您可以尝试以下小吃https://snack.expo.io/6lMAe57lM

这篇关于当当前选项卡在反应导航中处于活动状态时，如何在底部选项卡顶部添加一行 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！