u

code/allapp/allapp-rn/src/components/common/ao/Tab.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useRef, useState } from 'react'
-import { Pressable, Text, View } from 'react-native'
+import { Pressable, ScrollView, Text, View } from 'react-native'
 import PagerView from 'react-native-pager-view'
 
 interface TabItem {
@@ -12,18 +12,12 @@ interface TabProps {
   data?: TabItem[]
   defaultKey?: TabItem['key']
   onChange?: (key: TabItem['key']) => void
-  tabBarClass?: string
-  tabItemClass?: string
-  activeTabItemClass?: string
 }
 
 export default function Tab({
   data,
   defaultKey,
   onChange,
-  tabBarClass = 'flex flex-row gap-2 overflow-hidden',
-  tabItemClass = 'items-center justify-center rounded-md px-4 py-2 bg-gray-200',
-  activeTabItemClass = 'items-center justify-center rounded-md px-4 py-2 bg-gray-800',
 }: TabProps) {
   if (!data || data.length === 0)
     return null
@@ -72,22 +66,34 @@ export default function Tab({
   return (
     <View className="flex-1">
       {/* tab bar */}
-      <View className={tabBarClass}>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={{
+          flexDirection: 'row',
+          gap: 8,
+        }}
+      >
         {data.map((item) => {
           const isActive = item.key === selectedKey
           return (
             <Pressable
               key={item.key}
               onPress={() => handlePress(item.key)}
-              className={isActive ? activeTabItemClass : tabItemClass}
+              className={
+                isActive
+                  ? 'items-center justify-center rounded-md px-4 py-2 bg-gray-800'
+                  : 'items-center justify-center rounded-md px-4 py-2 bg-gray-200'
+              }
             >
+              
               <Text className={isActive ? 'text-white' : 'text-gray-700'}>
                 {item.label}
               </Text>
             </Pressable>
           )
         })}
-      </View>
+      </ScrollView>
 
       {hasContent && (
         <PagerView