React Native Paper底部标签导航激活图标背景色修改问题

问题说明 #

之前使用@react-navigation/material-top-tabs的createMaterialTopTabNavigator实现底部导航，虽能获得流畅滑动过渡效果，但该组件无keyboardHidesTabBar选项，无法在键盘弹出时自动隐藏标签栏。因此转而使用已迁移至react-native-paper的Material Bottom Tabs Navigator，完成功能开发后，需要修改激活图标默认的淡紫色背景样式。

解决方法 #

react-native-paper的BottomNavigation.Bar组件提供activeIndicatorStyle属性，专门用于自定义激活标签的指示器样式，通过它可直接修改默认淡紫色背景。

修改步骤 #

1. 在BottomNavigation.Bar的属性中添加activeIndicatorStyle，设置所需的背景颜色、圆角等样式；
2. 若需完全移除背景，将backgroundColor设为transparent；若需自定义颜色，直接设置对应色值即可。

修改后的代码示例 #

//other code and imports...
export default function AppStack() {

    //other code...

    return (
        <menuTab.Navigator
            initialRouteName="Home"
            screenOptions={{
                headerShown: false,
            }}
            tabBar={({ navigation, state, descriptors, insets }) => (
                <BottomNavigation.Bar
                    style={{
                        backgroundColor: 'white',
                        height: 60,
                        alignContent: 'center',
                        alignItems: 'center',
                    }}
                    activeColor={'black'}
                    inactiveColor={'#616161'}
                    // 新增属性修改激活标签背景
                    activeIndicatorStyle={{
                        backgroundColor: 'transparent', // 移除默认背景，或替换为自定义颜色如'#f0f0f0'
                        borderRadius: 8 // 可选：调整背景圆角
                    }}
                    navigationState={state}
                    safeAreaInsets={insets}
                    onTabPress={({ route, preventDefault }) => {
                        const event = navigation.emit({
                            type: 'tabPress',
                            target: route.key,
                            canPreventDefault: true,
                        });

                        if (event.defaultPrevented) {
                            preventDefault();
                        } else {
                            navigation.dispatch({
                                ...CommonActions.navigate(route.name, route.params),
                                target: state.key,
                            });
                        }
                    }}
                    renderIcon={({ route, focused, color }) => {
                        const { options } = descriptors[route.key];
                        if (options.tabBarIcon) {
                            return options.tabBarIcon({ focused, color, size: 24 });
                        }
                        return null;
                    }}
                />
            )}
        >
            <menuTab.Screen
                name="Home"
                component={HomeNavigator}
                options={{
                    tabBarLabel: () => { return null },
                    tabBarIcon: ({ color, focused }) => (
                        <Icon name={focused ? "news-filled" : "news"} color={color} size={30} />
                    ),
                }}
            />
            //other screens....
        </menuTab.Navigator>
    );
}
//other code...

全局修改方案（可选） #

若需统一修改所有BottomNavigation的激活指示器样式，可通过react-native-paper的Provider自定义主题：

import { Provider as PaperProvider, DefaultTheme } from 'react-native-paper';

// 自定义主题
const customTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: '#your-custom-color', // 此颜色会作为所有激活指示器的默认背景色
  },
};

// 在根组件中应用主题
export default function App() {
  return (
    <PaperProvider theme={customTheme}>
      <AppStack />
    </PaperProvider>
  );
}

内容的提问来源于stack exchange，提问作者user20951184