React Native使用React Navigation v5底部标签栏如何为激活态标签添加顶部边框

你可以直接使用createScreenOptions入参中已经拿到的focused状态，不需要从tabBarButton的props里获取，直接将激活态的边框样式合并到按钮样式中即可，修改后的代码如下：

修改createScreenOptions配置 #

const createScreenOptions = ({ focused, color, route }) => {
   let imgSrc

   switch (route.name.toLowerCase()) {
      case 'info':
         imgSrc = images.iconPropertyInfo
         break
      case 'profit':
         imgSrc = images.iconProfit
         break
      case 'rehab':
         imgSrc = images.iconRehab
         break
        case 'photos':
            imgSrc = images.iconPhotos 
            break
   }

   return {
      tabBarIcon: ({ color }) => (
         <View style={{ alignItems: 'center', marginTop: 10 }}>
            <Image
               source={imgSrc}
               resizeMode='contain'
               style={{
                  width: 25,
                  height: 25,
                  tintColor: color,
               }}
            />
            <Text style={{ color: color, fontSize: 12 }}>{route.name}</Text>
         </View>
      ),

       tabBarButton: (props) => {
         // 合并激活态顶部边框样式
         const activeBorderStyle = focused ? {
           borderTopWidth: 2,
           borderTopColor: colors.colorPrimary,
         } : {}
         return (
            <TabBarButton 
              {...props} 
              style={[props.style, activeBorderStyle]}
            />
         )
       }
   }
}

异常排查 #

如果修改后样式不生效，可以检查两个配置：

• 确认TabNav.Navigator的tabBarOptions.style没有设置borderTopWidth或者paddingTop遮挡边框
• 如果你使用的是自定义的TabBarButton组件，确认组件已经把接收到的style属性透传给最外层容器

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