React Native中如何修改bottom tab navigator底部标签导航器的样式

你只需要把定义好的样式绑定到Tab.Navigator的screenOptions配置的tabBarStyle字段即可，具体操作如下：

1. 找到项目中底部标签导航的声明代码，定位到Tab.Navigator组件
2. 为其添加screenOptions配置项，将styles.tabBar赋值给tabBarStyle属性

参考修改后的代码示例：

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

const Tab = createBottomTabNavigator();

// 你原有定义的样式
const styles = StyleSheet.create({
 tabBar: {
   backgroundColor: 'white',
   borderTopLeftRadius: 20,
   borderTopRightRadius: 20,
   // 可选补充：去掉默认的顶部灰色边框，效果更贴合设计图
   borderTopWidth: 0,
 },
});

function MyTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        // 保留你原有其他screenOptions配置，比如headerShown: false、tabBarIcon等
        tabBarStyle: styles.tabBar,
      }}
    >
      {/* 你原有各个Tab.Screen的代码不需要修改 */}
    </Tab.Navigator>
  );
}

如果修改后发现圆角区域下方透出了底层页面的背景色，可以给App的根容器设置和tabBar一致的白色背景，或者在tabBarStyle中补充position: 'absolute'属性适配即可。

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