react-native - 在反应本机选项卡导航中将指示器边框应用于选定选项卡

问题描述

我正在尝试将顶部边框应用于反应（本机）选项卡导航中的选定选项卡，但无法弄清楚。

我在其他解决方案中看到有一个“indicatorStyle”，但我无法添加它，看起来它已被弃用或其他东西。

请看下面的图片和代码：

我的标签导航器：

所需的选项卡导航器示例：

这是我的标签导航器：

import * as React from 'react';
import {  Text, View, Dimensions } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import {mainColor, seperatorColor, textColor} from '../../styles'

//Components stacks
import HomeStackScreens from './HomeStack'
import JoinStackScreens from './JoinStack'
import ProfileStackScreens from './ProfileStack'
import CreateRideStackScreens from './CreateRideStack'

import {homeIcon, profileIcon, messagesIcon, addRideIcon, JoinIcon} from '../../components/global/Icons'

import {navigationConsts, stackNavigationsConsts} from '../../constants/NavigationConsts'
import { color } from 'react-native-reanimated';

function DetailsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!12</Text>
    </View>
  );
}

const AnotherStack = createStackNavigator();

function AnotherStackScreen() {
  return (
    <AnotherStack.Navigator>
      <AnotherStack.Screen name="Details" component={DetailsScreen} />
    </AnotherStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function MainTabNavigator() {
  return (
      <Tab.Navigator 
      initialRouteName={stackNavigationsConsts.HOME_STACK}
      
      tabBarOptions={{
        tabStyle:{
          borderTopColor:mainColor.MainBackgroundColor, 
          // borderTopWidth:1.2, 
          // paddingVertical: 2,
          
        },
        activeTintColor: mainColor.MainBackgroundColor,
        inactiveTintColor: textColor.tabIcon,
        activeBackgroundColor: mainColor.backgroundColorWhite,
        inactiveBackgroundColor: mainColor.backgroundColorWhite,
        keyboardHidesTabBar: true,
        showLabel: false,
        borderTopWidth:24,
        borderTopColor:'red'
      }}
     
      
      >
        <Tab.Screen name={stackNavigationsConsts.HOME_STACK} component={HomeStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.HOME,
          tabBarIcon: ({ color, size }) => (
            homeIcon(color)
          ),
          }}
          tabStyle={{
            borderTopWidth:24,
            borderTopColor:'red'
          }}
          />
          <Tab.Screen name={stackNavigationsConsts.PROFILE_STACK} component={ProfileStackScreens} options={{ 
          tabBarLabel: navigationConsts.PROFILE ,
          tabBarIcon: ({ color, size }) => (
            profileIcon(color)
          ),
         
          }}/>
        <Tab.Screen name={stackNavigationsConsts.JOIN_STACK} component={JoinStackScreens} 
        options={{ 
          tabBarLabel: navigationConsts.JOIN ,
          tabBarIcon: ({ color, size }) => (
            JoinIcon(color)
          ),
          }}/>
        <Tab.Screen name={stackNavigationsConsts.NOTIFICATIONS_STACK} component={AnotherStackScreen} options={{ 
          tabBarLabel: navigationConsts.NOTIFICATIONS ,
          tabBarIcon: ({ color, size }) => (
            messagesIcon(color)
          ),
          tabBarBadge: 12
          }}/>
        <Tab.Screen name={stackNavigationsConsts.ADD_RIDE_STACK} component={CreateRideStackScreens} options={{ 
          tabBarLabel: navigationConsts.ADD_RIDE ,
          tabBarIcon: ({ color, size, focused }) => (
            addRideIcon(color)
          ),
          }}/>
        
      </Tab.Navigator>
  );
}

标签： react-nativestylesreact-navigation

react-native - 在反应本机选项卡导航中将指示器边框应用于选定选项卡

问题描述

解决方案

推荐阅读