如何在 react-native 中的 MaterialTopTabNavigator 上制作边框半径

Question

我正在用 react native 制作一个顶部导航栏。

这是我的输出图像：

我需要得到的图片结果：

我需要在每个选项卡中添加边框和背景颜色

这是我的代码：

import React, { Component, useState } from 'react';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const Tab = createMaterialTopTabNavigator();
const TopBar = () => {
    return (
        <Tab.Navigator tabBarOptions={{
            activeTintColor: '#e5e5f0',
            labelStyle: { fontSize: 10 },
            borderColor: '#e5e5f0',
            position: 'absolute',
            style: { backgroundColor: '#5858a0' },
          }}>
            <Tab.Screen name="All-Time" component={OrderHandler} />
            <Tab.Screen name="Today" component={OrderHandler} />
            <Tab.Screen name="Yesterday" component={OrderHandler} />
            <Tab.Screen name="This week" component={OrderHandler} />
        </Tab.Navigator>
    )
}

......
......

How can I do this..!? Any help would be useful

Answer 1

你可以做类似的事情。

<Tab.Navigator tabBarOptions={{
    labelStyle: { fontSize: 12,backgroundColor:'white', paddingHorizontal:20,paddingVertical:5,borderRadius:50,color:'#5858A0'},
    style: { backgroundColor: '#5858A0'},
    renderIndicator: () => null
          }}>

您可以根据需要添加/更改样式。

Answer 2

您可以通过自定义样式来接近您的设计。您需要使用以下道具提供样式

• style - 用于修改标签栏容器样式
• tabStyle - 用于修改单个标签样式
• labelStyle - 用于修改文本

以下内容可以帮助您接近您想要的位置。

<Tab.Navigator
  tabBarOptions={{
    labelStyle: { fontSize: 12, textTransform: 'none' },
    tabStyle: {
      height: 20,
      minHeight: 0,
      backgroundColor: '#e5e5f0',
      borderRadius: 100,
      margin: 5,
      marginVertical: 10,
      padding: 3,
      width: 'auto'
    },
    style: { backgroundColor: '#5858a0' },
    renderIndicator: () => null
  }}
>
  <Tab.Screen name="Home" component={HomeScreen} />
  <Tab.Screen name="Settings" component={SettingsScreen} />
</Tab.Navigator>

但要完全改变标签栏的工作方式，您必须使用自定义组件。 Tab.Navigator 接受一个名为 tabBar 的道具。您可以在文档here 中找到更多相关信息。

在那里，您可以传入一个自定义组件，该组件以您想要的任何方式呈现选项卡。可以在this Snack中找到一个示例