如何在反应本机的 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

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

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

中找到示例

Answer 2

你可以做类似的事情。

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

您可以 add/change 根据您的要求设计样式。

如何在反应本机的 MaterialTopTabNavigator 上制作边框半径

How to make a border-radius on MaterialTopTabNavigator in react-native

styles

stylesheet

react-native

react-native-stylesheet