reactjs 我想在createMeteralTopTabNavigator中的选项卡之间添加垂直线

von4xj4u  于 2022-12-26  发布在  React
关注(0)|答案(2)|浏览(166)

Hy.我正在复制一个应用程序。我正在使用createMeteralTopTabNavigator。其余功能工作正常。我想在选项卡之间显示一条垂直线。但我不知道从哪里开始。请帮助我。我希望选项卡显示一条类似于图像中的线。
这是我代码

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;

s5a0g9ez

s5a0g9ez1#

你可以通过在选项卡中添加css样式来实现这一点。
为此,您只需单击F12打开inspect,并找出用于显示标题和包含这些标题的div的样式的类。
找到类后,通过应用其他所需的样式(如颜色、宽度和边框样式)添加border-left

yjghlzjz

yjghlzjz2#

这可以通过tabBarItemStyle属性来实现。但是,它会在每个选项卡栏项上添加竖线,但在我的情况下,最后一项的竖线不会显示,它工作正常
〈选项卡导航器

screenOptions={{
  tabBarItemStyle:{borderRightWidth:1,height:Height*0.08,borderRightColor:'red'}, 
 }}
>

{/* 您的选项卡屏幕 */}</Tab.Navigator>

相关问题