【问题标题】:How to add a line at top of the bottom tab when the current tab is active in react navigation 5当当前选项卡在反应导航5中处于活动状态时,如何在底部选项卡顶部添加一行
【发布时间】:2021-01-30 16:42:25
【问题描述】:

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

React 导航版本:

"@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",

【问题讨论】:

    标签: react-native react-navigation-v5 react-navigation-bottom-tab


    【解决方案1】:

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

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

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

    <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

    【讨论】:

    • 如何将自定义参数传递给 CustomTabButton ?
    • @Hugo 你的意思是自定义道具吗? tabBarButton 带有一个函数,你可以传递 props 并返回组件
    猜你喜欢
    • 2021-08-06
    • 1970-01-01
    • 2017-09-22
    • 2020-09-10
    • 2018-11-18
    • 2022-08-18
    • 2021-06-17
    • 2019-11-03
    • 1970-01-01
    相关资源
    最近更新 更多