0

我正在制作一个反应原生的顶部导航栏。

这是我的输出图像： 图 1

我需要得到的图像结果：

图 2

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

这是我的代码：

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
4

2 回答 2

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. 您可以在此处的文档中找到有关它的更多信息。

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

于 2021-02-12T06:45:48.140 回答
1

你可以做类似的事情。

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

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

于 2021-02-12T07:02:13.677 回答