feat: support border-radius on cursor (#8)

.gitignore

@@ -77,3 +77,4 @@ android/keystores/debug.keystore
 # generated by bob
 lib/
 
+.history/

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-tab-page-view",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "React Native Tab Page View",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/PageContentView.tsx

@@ -64,7 +64,7 @@ export default class PageContentView extends Component<PageContentViewProps> {
       },
     ],
     {
-      useNativeDriver: true,
+      useNativeDriver: false,
     }
   );
   private scrollView: RefObject<ContentFlatList> | null = React.createRef();

src/PageHeaderCursor.tsx

@@ -44,7 +44,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
 
   private _findPercentCursorWidth = () => {
     const { width } = this.props.cursorStyle as any;
-    if (typeof width == 'string') {
+    if (typeof width === 'string') {
       return width.match(/(\d+(\.\d+)?)%/)?.[1];
     }
     return null;
@@ -78,7 +78,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
                 const width = item.width - left - right;
                 return isWidth
                   ? (width * Number(percentWidth ?? 100)) / 100
-                  : item.x + width / 2.0 + left;
+                  : item.x + left;
               }
             } else {
               return 0;
@@ -113,11 +113,11 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
   override render() {
     const fixCursorWidth = this._findFixCursorWidth();
     const translateX = this._reloadPageIndexValue(false);
-    const scaleX = this._reloadPageIndexValue(true);
+    const widthX = this._reloadPageIndexValue(true);
 
     const containerStyle: Animated.WithAnimatedObject<any> = {
-      transform: [{ translateX }, fixCursorWidth ? { scale: 1 } : { scaleX }],
-      width: fixCursorWidth ?? 1,
+      transform: [{ translateX }],
+      width: fixCursorWidth ?? widthX,
       position: 'absolute',
       top: 0,
       bottom: 0,
@@ -127,7 +127,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
 
     const contentStyle = [
       this.props.cursorStyle,
-      { left: null, right: null, width: fixCursorWidth ?? 1 },
+      { left: null, right: null, width: fixCursorWidth ?? widthX },
     ];
 
     return (
@@ -149,7 +149,7 @@ export default class PageHeaderCursor extends Component<PageHeaderCursorProps> {
           {this.props.renderCursor ? (
             this.props.renderCursor()
           ) : (
-            <View style={contentStyle}></View>
+            <Animated.View style={contentStyle} />
           )}
         </Animated.View>
       </View>

src/PageHeaderView.tsx

@@ -37,7 +37,9 @@ interface PageHeaderViewProps extends ScrollViewProps {
 
 export default class PageHeaderView extends Component<PageHeaderViewProps> {
   private scrollPageIndex = this.props.initialScrollIndex ?? 0;
-  private scrollPageIndexValue = new Animated.Value(this.scrollPageIndex);
+  private scrollPageIndexValue = new Animated.Value(this.scrollPageIndex, {
+    useNativeDriver: false,
+  });
   private nextScrollPageIndex = -1;
   private shouldHandlerAnimationValue = true;
   private itemConfigList = this.props.data.map((_: any) => ({
@@ -217,7 +219,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
         this.scrollPageIndexValue,
         index,
         this.props.selectedPageIndexDuration,
-        true
+        false
       );
     }
     this.props.onSelectedPageIndex?.(index);