React Native TabItem左下角与左上角圆角不显示问题求助

你的问题出在圆角属性加错了位置：你把borderBottomLeftRadius和borderTopLeftRadius加在了外层的TouchableOpacity（tabItem）上，但这个组件本身没有背景色，实际的高亮背景是在内部的Animated.Text（tabButtonActive）里，再加上外层tabBar的背景色重叠，导致圆角完全看不到。

具体修改步骤： #

1. 转移圆角属性到激活文本样式
   把圆角属性从tabItem移除，改为给激活状态的文本组件添加，并且只针对第一个TabItem（因为你要的是对应Tab的左上/左下圆角）。

2. 添加溢出隐藏
   给tabItem加上overflow: 'hidden'，避免子组件内容超出父容器范围。

3. 动态判断应用圆角
   在渲染Tab时，只有当是第一个Tab且处于激活状态时，才应用圆角样式。

修改后的代码示例： #

样式部分：

tabBar: {
  marginBottom: 10,
  backgroundColor: colors.GREYTWO,
  flexDirection: 'row',
  justifyContent: 'center',
},
tabItem: {
  alignItems: 'center',
  flex: 1,
  borderColor: 'green',
  overflow: 'hidden', // 新增：防止子组件内容溢出
},
tabButton: {
  fontFamily: fonts.MEDIUM,
  fontWeight: fonts.FONT_WEIGHT_MEDIUM,
  fontSize: fonts.FONT_SIZE_LARGE,
  width: '100%',
  textAlign: 'center',
  padding: 15,
  color: colors.LIGHTBLACK,
},
tabButtonActive: {
  backgroundColor: colors.GREEN,
  color: colors.WHITE,
  justifyContent: 'center',
},
// 新增：第一个Tab激活时的圆角样式
firstTabActive: {
  borderBottomLeftRadius: 5,
  borderTopLeftRadius: 5,
}

渲染TabBar部分：

const renderTabBar = ({ navigationState }: Props) => (
  <View style={styles.tabBar}>
    {navigationState.routes.map((route, i) => {
      const active = navigationState.index === i;

      return (
        <TouchableOpacity style={styles.tabItem} onPress={() => setIndex(i)}>
          <Animated.Text
            style={[
              styles.tabButton,
              active ? styles.tabButtonActive : null,
              // 仅第一个Tab激活时应用圆角
              active && i === 0 ? styles.firstTabActive : null,
            ]}>
            {route.title}
          </Animated.Text>
        </TouchableOpacity>
      );
    })}
  </View>
);

额外说明： #

• 如果需要所有TabItem都显示左上/左下圆角，直接把borderBottomLeftRadius和borderTopLeftRadius写到tabButtonActive里即可。
• 若仍有问题，检查是否存在其他样式冲突（比如tabBar的内边距、子组件的宽高设置），确保激活状态的文本组件能完全填充tabItem区域。

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