u

code/base-project/base-app/src/components/custom/PagerTabs.tsx

@@ -13,7 +13,7 @@ interface PagerTabsProps {
   routes: PagerRoute[]
   left?: React.ReactNode
   right?: React.ReactNode
-  initialIndex?: number
+  selectedIndex?: number // 外部控制选中页
   onChange?: (key: string) => void
   indicatorWidth?: number
 
@@ -25,17 +25,24 @@ export default function PagerTabs({
   routes,
   left,
   right,
-  initialIndex = 0,
+  selectedIndex,
   onChange,
   indicatorWidth = 38,
   className,
   style,
 }: PagerTabsProps) {
   const pagerRef = React.useRef<PagerView>(null)
-  const [index, setIndex] = React.useState(initialIndex)
+  const [index, setIndex] = React.useState(selectedIndex ?? 0)
   const [tabWidth, setTabWidth] = React.useState(0)
+  const scrollX = React.useRef(new Animated.Value(selectedIndex ?? 0)).current
 
-  const scrollX = React.useRef(new Animated.Value(0)).current
+  // 外部 selectedIndex 更新时同步内部 index
+  React.useEffect(() => {
+    if (typeof selectedIndex === 'number' && selectedIndex !== index) {
+      setIndex(selectedIndex)
+      pagerRef.current?.setPage(selectedIndex)
+    }
+  }, [selectedIndex])
 
   const onTabPress = (i: number) => {
     pagerRef.current?.setPage(i)
@@ -54,7 +61,6 @@ export default function PagerTabs({
   }
 
   const tabWidthPerTab = tabWidth / routes.length
-
   const indicatorTranslateX = scrollX.interpolate({
     inputRange: routes.map((_, i) => i),
     outputRange: routes.map(
@@ -66,9 +72,7 @@ export default function PagerTabs({
   return (
     <View
       className={`${className} flex-1`}
-      style={[
-        style,
-      ]}
+      style={[style]}
     >
       {/* Header */}
       <View className="flex flex-row items-center">
@@ -86,7 +90,7 @@ export default function PagerTabs({
           {routes.map((r, i) => (
             <TouchableOpacity
               key={r.key}
-              className="flex-1 items-center justify-center py-1"
+              className="flex-1 items-center justify-center py-2"
               onPress={() => onTabPress(i)}
             >
               <Text
@@ -115,7 +119,7 @@ export default function PagerTabs({
       <PagerView
         ref={pagerRef}
         style={{ flex: 1 }}
-        initialPage={initialIndex}
+        initialPage={selectedIndex ?? 0}
         onPageScroll={onPageScroll}
         onPageSelected={e => onPageSelected(e.nativeEvent.position)}
       >