feat: 调整TabBar、TabView的interface

example/src/pages/TabBarExample.tsx

@@ -32,7 +32,7 @@ const TabBarExample: React.FC<TabBarExampleProps> = (props) => {
       <TabBar
         tabs={tabs2}
         tabBarflex="equal-width"
-        scrollEnabled={false}
+        tabScrollEnabled={false}
         spacing={30}
         showSeparator
         separatorComponent={() => (
@@ -62,6 +62,7 @@ const TabBarExample: React.FC<TabBarExampleProps> = (props) => {
         }}
         activeTextColor="red"
         inactiveTextColor="green"
+        activeScale={1.2}
         tabBarItemStyle={{ backgroundColor: 'pink' }}
       />
       <TabBar

src/components/NestedTabView/hooks.ts

@@ -13,8 +13,8 @@ import {
   NestedTabViewVerifyProps,
   RefreshControllerContextProps,
 } from './type';
-import { TabBarRef } from '../TabBar';
-import { PageViewRef } from '../PageView';
+import { TabBarProps, TabBarRef } from '../TabBar';
+import { PageViewProps, PageViewRef } from '../PageView';
 
 interface ChildInfoType {
   scrollValue: SharedValue<number>;
@@ -117,11 +117,18 @@ export const useVerifyProps = (
     activeTextColor,
     inactiveTextColor,
     tabStyle,
+    tabBarBounces,
+    activeScale,
 
+    pageStyle,
     scrollEnabled,
-    bounces,
+    pageBounces,
     gestureBack,
-    pageStyle,
+    pageMargin,
+    orientation,
+
+    lazy,
+    lazyPreloadNumber,
 
     onTabPress,
     onPageScroll,
@@ -159,7 +166,7 @@ export const useVerifyProps = (
     }
   }
 
-  const tabProps = {
+  const tabProps: TabBarProps = {
     tabs,
     tabBarflex,
     tabScrollEnabled,
@@ -175,14 +182,21 @@ export const useVerifyProps = (
     inactiveTextColor,
     style: { width: contentSize, ...tabStyle },
     initialTab: initialIndex,
+    activeScale,
+    bounces: tabBarBounces,
   };
 
-  const pageProps = {
-    scrollEnabled,
-    bounces,
-    gestureBack,
+  const pageProps: Omit<PageViewProps, 'children'> = {
     style: { flex: 1, width: contentSize, ...pageStyle },
     initialPage: initialIndex,
+    scrollEnabled,
+    bounces: pageBounces,
+    gestureBack,
+
+    pageMargin,
+    orientation,
+    lazy,
+    lazyPreloadNumber,
   };
 
   return {

src/components/NestedTabView/type.ts

@@ -22,11 +22,13 @@ export interface NestedTabViewOwnProps {
 }
 
 export interface NestedTabViewProps
-  extends Omit<TabBarProps, 'style' | 'initialTab'>,
-    Omit<PageViewProps, 'style' | 'initialPage'>,
+  extends Omit<TabBarProps, 'style' | 'initialTab' | 'bounces'>,
+    Omit<PageViewProps, 'style' | 'initialPage' | 'bounces'>,
     NestedTabViewOwnProps {
   tabStyle?: ViewStyle;
   pageStyle?: ViewStyle;
+  tabBarBounces?: boolean;
+  pageBounces?: boolean;
 }
 
 export interface NestedTabViewVerifyProps extends NestedTabViewOwnProps {

src/components/TabBar/TabBar.tsx

@@ -27,12 +27,14 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
     defaultSliderStyle,
     tabBarItemStyle,
     tabBarItemTitleStyle,
+    bounces = true,
     separatorComponent,
     sliderComponent,
     onTabPress,
     onLayout,
     activeTextColor,
     inactiveTextColor,
+    activeScale,
 
     initialTab = 0,
     defalutSliderWidth,
@@ -155,6 +157,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
         contentContainerStyle={styles.contentContainerStyle}
         scrollEventThrottle={16}
         showsHorizontalScrollIndicator={false}
+        bounces={bounces}
       >
         {tabs?.length > 0 &&
           tabs.map((tab, index) => {
@@ -170,6 +173,7 @@ const TabBar = forwardRef<TabBarRef, TabBarProps>((props, ref) => {
                   activeTextColor={activeTextColor}
                   inactiveTextColor={inactiveTextColor}
                   title={tab}
+                  activeScale={activeScale}
                   onLayout={onTabBarItemLayout}
                   onPress={handleOnPress}
                 />

src/components/TabBar/TabBarItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { TabBarItemProps } from './type';
 import Animated, {
@@ -18,11 +18,12 @@ const TabBarItem: React.FC<TabBarItemProps> = (props) => {
     currentIndex,
     activeTextColor = 'black',
     inactiveTextColor = 'black',
+    activeScale = 1,
     onLayout,
     onPress,
   } = props;
 
-  const input = [index - 1, index, index + 1];
+  const input = useMemo(() => [index - 1, index, index + 1], [index]);
 
   const animatedText = useAnimatedStyle(() => {
     return {
@@ -43,7 +44,7 @@ const TabBarItem: React.FC<TabBarItemProps> = (props) => {
           scale: interpolate(
             currentIndex.value,
             input,
-            [0.9, 1, 0.9],
+            [1, activeScale, 1],
             Extrapolation.CLAMP
           ),
         },
@@ -55,6 +56,7 @@ const TabBarItem: React.FC<TabBarItemProps> = (props) => {
     <TouchableOpacity
       onPress={() => onPress(index)}
       onLayout={(event) => onLayout(index, event.nativeEvent.layout)}
+      activeOpacity={1}
       style={[styles.container, { width: width }, style]}
     >
       <Animated.Text style={[titleStyle, animatedText]}>{title}</Animated.Text>

src/components/TabBar/type.ts

@@ -1,4 +1,9 @@
-import { DimensionValue, LayoutChangeEvent, TextStyle, ViewStyle } from 'react-native';
+import {
+  DimensionValue,
+  LayoutChangeEvent,
+  TextStyle,
+  ViewStyle,
+} from 'react-native';
 import { SharedValue } from 'react-native-reanimated';
 
 export interface TabBarProps {
@@ -18,6 +23,8 @@ export interface TabBarProps {
   initialTab?: number;
   activeTextColor?: string;
   inactiveTextColor?: string;
+  activeScale?: number;
+  bounces?: boolean;
 
   onTabPress?: (index: number) => void;
   onLayout?: (e: LayoutChangeEvent) => void;
@@ -39,6 +46,7 @@ export interface TabBarItemProps {
   style?: ViewStyle;
   titleStyle?: TextStyle;
   width?: DimensionValue;
+  activeScale?: number;
   onLayout: (index: number, layout: TabBarItemLayout) => void;
   onPress: (index: number) => void;
 }

src/components/TabView/hook.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TabViewProps, TabViewVerifyProps } from './type';
 import { Dimensions } from 'react-native';
+import { TabBarProps } from '../TabBar';
+import { PageViewProps } from '../PageView';
 
 const { width } = Dimensions.get('window');
 
@@ -19,12 +21,19 @@ export const useVerifyProps = (props: TabViewProps): TabViewVerifyProps => {
     tabBarItemTitleStyle,
     activeTextColor,
     inactiveTextColor,
+    tabBarBounces,
+    activeScale,
 
     children,
 
     scrollEnabled,
-    bounces,
+    pageBounces,
     gestureBack,
+    pageMargin,
+    orientation,
+
+    lazy,
+    lazyPreloadNumber,
 
     onTabPress,
     onPageScroll,
@@ -62,7 +71,7 @@ export const useVerifyProps = (props: TabViewProps): TabViewVerifyProps => {
     }
   }
 
-  const tabProps = {
+  const tabProps: TabBarProps = {
     tabs,
     tabBarflex,
     tabScrollEnabled,
@@ -78,14 +87,21 @@ export const useVerifyProps = (props: TabViewProps): TabViewVerifyProps => {
     inactiveTextColor,
     style: { width: contentSize, ...tabStyle },
     initialTab: initialIndex,
+    activeScale,
+    bounces: tabBarBounces,
   };
 
-  const pageProps = {
-    scrollEnabled,
-    bounces,
-    gestureBack,
+  const pageProps: Omit<PageViewProps, 'children'> = {
     style: { flex: 1, width: contentSize, ...pageStyle },
     initialPage: initialIndex,
+    scrollEnabled,
+    bounces: pageBounces,
+    gestureBack,
+
+    pageMargin,
+    orientation,
+    lazy,
+    lazyPreloadNumber,
   };
 
   return {

src/components/TabView/type.ts

@@ -3,10 +3,12 @@ import { PageViewProps, PageStateType } from '../PageView';
 import { ViewStyle } from 'react-native';
 
 export interface TabViewProps
-  extends Omit<TabBarProps, 'style' | 'initialTab'>,
-    Omit<PageViewProps, 'style' | 'initialPage'> {
+  extends Omit<TabBarProps, 'style' | 'initialTab' | 'bounces'>,
+    Omit<PageViewProps, 'style' | 'initialPage' | 'bounces'> {
   initialIndex?: number;
   style?: ViewStyle;
+  tabBarBounces?: boolean;
+  pageBounces?: boolean;
   tabStyle?: ViewStyle;
   pageStyle?: ViewStyle;
 }