feat: auto scroll to the center

OneKeyHQ · Jun 13, 2024 · 365a23e · 365a23e
1 parent 48c5cf2
commit 365a23e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@onekeyfe/react-native-tab-page-view",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "React Native Tab Page View",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

diff --git a/src/PageHeaderView.tsx b/src/PageHeaderView.tsx
@@ -79,6 +79,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
   });
   private scrollView: RefObject<ScrollView> = React.createRef();
   private cursor: RefObject<PageHeaderCursor> = React.createRef();
+  private scrollViewWidth = 0;
 
   static defaultProps: PageHeaderViewProps = {
     data: [],
@@ -127,7 +128,7 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
         const itemLayout = this?.cursor?.current?.state
           ?.itemContainerLayoutList?.[newPageIndex] ?? { x: 0, width: 0 };
         this?.scrollView?.current?.scrollTo({
-          x: itemLayout.x - itemLayout.width,
+          x: itemLayout.x + itemLayout.width / 2.0 - this.scrollViewWidth / 2.0,
         });
         this.scrollPageIndex = newPageIndex;
       }
@@ -275,6 +276,10 @@ export default class PageHeaderView extends Component<PageHeaderViewProps> {
             );
             this?.props?.onContentSizeChange?.(width, height);
           }}
+          onLayout={(event) => {
+            this.scrollViewWidth = event.nativeEvent.layout.width;
+            this?.props?.onLayout?.(event);
+          }}
           style={this.props.containerStyle}
           {...restProps}
           contentContainerStyle={[