React native react-native-scrollable-tab-view ScrollableTab 默认不显示指示器问题

最新推荐文章于 2024-09-14 07:49:48 发布

原创最新推荐文章于 2024-09-14 07:49:48 发布 · 949 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#native #解决方案

ReactNative 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种解决ScrollableTabBar组件初始化后出现滚动异常的方法，通过修改源码中scrollValue的获取方式，从使用_value属性更改为使用__getValue()方法，从而解决了组件在特定情况下的显示错误。

在初始化过后可能会出现此问题，解决方案参考一位 GitHub 的 Issues

需要修改ScrollableTabBar源码：
将this.updateView({value: this.props.scrollValue._value, });
替换为：
this.updateView({value: this.props.scrollValue.__getValue(), });


   measureTab(page, event) {
     const { x, width, height, } = event.nativeEvent.layout;
     this._tabsMeasurements[page] = {left: x, right: x + width, width, height, };
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },

   render() {
@@ -209,12 +209,12 @@ const ScrollableTabBar = React.createClass({
       width = WINDOW_WIDTH;
     }
     this.setState({ _containerWidth: width, });
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },

   onContainerLayout(e) {
     this._containerMeasurements = e.nativeEvent.layout;
-    this.updateView({value: this.props.scrollValue._value, });
+    this.updateView({value: this.props.scrollValue.__getValue(), });
   },
 });