想要在createMeterialTopTabNavigator中的选项卡之间添加垂直线

Question

嗨。 我正在复制一个应用程序。我正在使用createMeterialTopTabNavigator。其余功能运行正常。我想在标签之间显示一条垂直线。但我不知道从哪里开始。请帮我。 我希望标签页显示类似图像中的线条。

这是我的代码

import { Text, View} from 'react-native';
import Constants from 'expo-constants';

import {
  createBottomTabNavigator,
  createMaterialTopTabNavigator
} from "react-navigation-tabs";
import{createAppContainer,NavigationContainer} from "react-navigation";
import ArenaCashScreen from './Screens/ArenaCashScreen';
import ArenaPointsScreen from './Screens/ArenaPointsScreen';
import UnknownCashScreen from './Screens/UnknownCashScreen';



const MainTabs = createMaterialTopTabNavigator(
      { 
        CurrentList: {
          screen: ArenaCashScreen,
          navigationOptions: {
            title: 'Arena Cash (AC)',
          },
        },
        OthersList: {
          screen: ArenaPointsScreen,
          navigationOptions: {
            title: 'Arena Points (AP)',
          },
        },
        thirdlistt: {
          screen: UnknownCashScreen,
          navigationOptions: {
            title: 'Unknown Cash (UC)',
          },
        },
      },
      {
        tabBarOptions: {
                activeTintColor:'white',
                inactiveTintColor:'white',
                indicatorStyle: {
                    backgroundColor: 'orange',
                  },
              style: {
                backgroundColor: 'black',
                elevation:0, // remove shadow on Android
                shadowOpacity: 0, // remove shadow on iOS,
                borderWidth:1,
                borderColor:'black'
              },
          showLabel: true,
          showIcon: false,
        },
      },
    );
    
const AppContainer2 = createAppContainer(MainTabs);

export default AppContainer2;

Answer 1

您可以通过在选项卡中添加CSS样式来做到这一点。

为此，您只需单击 F12 即可打开检查，并找到用于显示标题和包含这些标题的div的样式的类。

找到该类后，通过应用其他必需的样式（例如颜色和宽度以及边框样式）添加 border-left 。