fix: scroll issues

.gitignore

@@ -0,0 +1,106 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.expo/**

README-zh_CN.md

@@ -160,6 +160,7 @@ Prop              | Type     | Default     | Description
 **`onBeforeRefresh`**             | Function    | null          | 下拉刷新前置函数, 执行 **`next`** 将执行Screen中 **`onRefresh`** 函数，执行 **`toggled`** 将切换系统loading,可传 true / false 进行指定 (回调含有 **`next`** , **`toggled`** 两个形参)
 **`onBeforeEndReached`**             | Function    | null          | 上滑加载更多前置函数, 执行next将执行Screen中 **`onEndReached`** 函数 (回调含有 **`next`** 形参)
 **`onTabviewChanged`**             | Function    | null          | Tab切换完成回调 (回调含有 **`index`**, **`tabLabel`** 两个形参)
+**`screenScrollThrottle`**             | Number    | 60          | **`Screen`** 横向滑动时节流参数,单位 (毫秒)
 **`header`**             | Function / JSX Element / Class Component    | null          | 顶部组件 (若是函数需要返回 Element)
 **`oneTabHidden`**             | Boolean    | false          | 仅一个Tab时将隐藏自身
 **`enableCachePage`**             | Boolean    | true          | 是否持久化页面切换后不销毁

README.md

@@ -160,6 +160,7 @@ Prop              | Type     | Default     | Description
 **`onBeforeRefresh`**             | Function    | null          | Pull down to refresh the pre-functions, execute **`next`** to execute **`onRefresh`** function in Screen, execute **`toggled`** to switch system loading, you can pass true / false to specify (callback contains **`next`**, **`toggled`** two formal parameters)
 **`onBeforeEndReached`**             | Function    | null          | Slide up to load more pre-functions, execute next will execute the **`onEndReached`** function in the Screen (callback contains **`next`** formal parameters)
 **`onTabviewChanged`**             | Function    | null          | Tab switch completion callback (callback contains **`index`**, **`tabLabel`** two formal parameters)
+**`screenScrollThrottle`**             | Number    | 60          | **`Screen`** Throttle parameters during lateral sliding, Unit (ms)
 **`header`**             | Function / JSX Element / Class Component    | null          | Top component (if the function needs to return Element)
 **`oneTabHidden`**             | Boolean    | false          | Hide itself when there is only one Tab
 **`enableCachePage`**             | Boolean    | true          | Whether the persistent page will not be destroyed after switching

package.json

@@ -7,7 +7,8 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "react-native-snap-carousel": "^3.9.1"
+    "lodash.throttle": "^4.1.1",
+    "react-native-snap-carousel": "^4.0.0-beta.6"
   },
   "keywords": [
     "react",

src/index.js

@@ -3,6 +3,7 @@ import { StyleSheet, Text, View, SectionList, RefreshControl, TouchableOpacity,
 import PropTypes from 'prop-types';
 import Carousel from 'react-native-snap-carousel';
 import HocComponent from './HocComponent';
+import _throttle from 'lodash.throttle';
 const deviceWidth = Dimensions.get('window').width;
 const deviceHeight = Dimensions.get('window').height;
 
@@ -46,7 +47,8 @@ export default class ScrollableTabView extends React.Component {
     fillScreen: PropTypes.bool,
     title: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     titleArgs: PropTypes.object,
-    onScroll: PropTypes.func
+    onScroll: PropTypes.func,
+    screenScrollThrottle: PropTypes.number
   };
 
   static defaultProps = {
@@ -86,7 +88,8 @@ export default class ScrollableTabView extends React.Component {
       interpolateOpacity: {},
       interpolateHeight: {}
     },
-    onScroll: null
+    onScroll: null,
+    screenScrollThrottle: 60
   };
 
   constructor(props) {
@@ -141,10 +144,7 @@ export default class ScrollableTabView extends React.Component {
    */
   _toProcess(props) {
     if (props.stacks && props.stacks.length && props.stacks.length != this.stacks.length && props.firstIndex != this.state.checkedIndex) {
-      const timer = setTimeout(() => {
-        this._onTabviewChange(props.firstIndex);
-        clearTimeout(timer);
-      });
+      this._onTabviewChange(props.firstIndex);
     }
   }
 
@@ -427,7 +427,7 @@ export default class ScrollableTabView extends React.Component {
     );
     this._tabTranslateX(index);
     // 非滑动触发的情况下需要同步index，避免Carousel无法正常显示
-    !isCarouselScroll && this._snapToItem(index);
+    // !isCarouselScroll && this._snapToItem(index);
     // 切换后强制重置刷新状态
     this._toggledRefreshing(false);
   }
@@ -552,16 +552,16 @@ export default class ScrollableTabView extends React.Component {
           renderItem={() => {
             return (
               <Carousel
-                pagingEnabled={true}
                 ref={c => (this.tabview = c)}
                 inactiveSlideScale={1}
                 data={this.stacks}
                 renderItem={this._renderItem.bind(this)}
                 sliderWidth={deviceWidth}
                 itemWidth={deviceWidth}
-                onBeforeSnapToItem={index => {
-                  this._onTabviewChange(index, true);
-                }}
+                cnScrollIndexChanged={_throttle(this._onTabviewChange.bind(this), this.props.screenScrollThrottle, {
+                  leading: false,
+                  trailing: true
+                })}
                 initialScrollIndex={this.state.checkedIndex}
                 firstItem={this.state.checkedIndex}
                 getItemLayout={(data, index) => ({
@@ -580,7 +580,7 @@ export default class ScrollableTabView extends React.Component {
                     {
                       // listener: ({ nativeEvent }) => console.log(nativeEvent.contentOffset.x),
                       // If useNativeDriver is True, the listener cannot be triggered
-                      useNativeDriver: !__DEV__
+                      useNativeDriver: true
                     }
                   )
                 }