Question

我想创建具有边框半径的BottomTab，但是在我的选项卡后面显示背景颜色（白色），我不知道如何删除或更改它：

我找到了“解决方案”：

tabBarOptions={{
        showLabel: false,
        activeTintColor: theme.primary,
        inactiveTintColor: theme.tintInactiveTabBar,
        style: {
          backgroundColor: theme.backgroundTabBar,
          position: 'absolute',
          left: 0,
          bottom: 0,
          right: 0,
          borderTopWidth: 0,
          borderTopRightRadius: 10,
          borderTopLeftRadius: 10,
          height: 60,
          elevation: 0,
        },
      }}

但是设置位置：绝对存在另一个问题：在ScrollViews中看不到所有内容：

我尝试在te容器中设置填充或边距，但这不起作用。

Answer 1

尝试一下：

activeBackgroundColor-活动标签的背景颜色，inactiveBackgroundColor-活动标签的背景颜色。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator tabBarOptions={{
            scrollEnabled: true,
            activeTintColor: '#3684F6', //'rgb(12,157,197)',
            inactiveTintColor: 'black',
            indicatorStyle: {
              backgroundColor: '#ACACAC',
            },
            labelStyle: {
              fontSize: 16,
              color: 'black',
            },
activeBackgroundColor: 'white', 
inactiveBackgroundColor : 'gray',
            style: {
              backgroundColor: 'white',
            },
            statusBarStyle: 'light-content',
          }}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  );
}

Answer 2

您可以通过在 React-Navigation-5 中更改主题的背景颜色来设置应用的默认背景颜色

enter link description here

import * as React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
  },
};

export default function App() {
  return (
    <NavigationContainer theme={MyTheme}>{/* content */}</NavigationContainer>
  );
}

Answer 3

时间很长，但是由于RN5是动态路由，因此您可以使用状态来更改样式：


interface Props {};

const AppBottomTab = createBottomTabNavigator();

const AppMobileNav: React.FC<Props> = props => {

  const [borderRadiusTab, setBorderRadiusTab] = useState<boolean>(false);

  return (
    <AppBottomTab.Navigator
      initialRouteName="Home"
      tabBarOptions={{
        activeTintColor: white,
        inactiveTintColor: grey,
        showLabel: false,
        tabStyle: {
          backgroundColor: black,
          borderTopLeftRadius: borderRadiusTab ? 25 : 0,
          borderTopRightRadius: borderRadiusTab ? 25 : 0
        },
        style: {
          backgroundColor: black,
          borderTopColor: "transparent",
          borderTopLeftRadius: borderRadiusTab ? 25 : 0,
          borderTopRightRadius: borderRadiusTab ? 25 : 0,
        },
      }}
    >
      <AppBottomTab.Screen
        name="Message"
        component={MessageMenu}
        options={({route}) => ({
          tabBarIcon: ({color}) => <Icon source={require('...')} size={30} style={{tintColor: color}} />
        })}
        listeners={() => ({
          tabPress: event => setBorderRadiusTab(true)
        })}
      />
      <AppBottomTab.Screen
        name="Home"
        component={HomeScreen}
        options={({route}) => ({
          tabBarIcon: ({color}) => <Icon source={require('...')} size={30} style={{tintColor: color}} />
        })}
                listeners={() => ({
          tabPress: event => setBorderRadiusTab(false)
        })}
      />
      <AppBottomTab.Screen
        name="Settings"
        component={SettingsScreen}
        options={({route}) => ({
          tabBarIcon: ({color}) => <Icon source={require('...')} size={30} style={{tintColor: color}} />
        })}
                listeners={() => ({
          tabPress: event => setBorderRadiusTab(true)
        })}
      />
    </AppBottomTab.Navigator>
  );
}

如何更改React Navigation v5中出现在BottomTab后面的背景颜色？

3 个答案: