最近在进行项目框架重构,在重构的过程中,遇到了诸多问题,今天在调试程序的时候发现一个问题:顶部的tabBar组件react-native-scrollable-tab-view的initalPage方法不起作用,遂在GitHub上查找答案。
问题由来:之前项目的reactnative版本是0.42.3,现在项目重构后升级到最新的版本,目前是0.48.3,升级后发现顶部的tabBar组件不好用了。
查找github上发现了两个方法,可以修复这个问题:
1.修改控件源码
GitHub上提出的相关问题参阅:
https://github.com/skv-headless/react-native-scrollable-tab-view/issues/712
https://github.com/skv-headless/react-native-scrollable-tab-view/commit/4312d6cca2fe7859caa5219f2ee8b61edcf04884
修改[ScrollableTabBar.js]这个文件
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() {
[
](https://github.com/skv-headless/react-native-scrollable-tab-view/commit/4312d6cca2fe7859caa5219f2ee8b61edcf04884#diff-887c86a5a9136b4961467f9ee2401236)
@@ -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(), });
},
});
2、升级控件至最新版本0.7.4
npm install react-native-scrollable-tab-view@0.7.4 --save
网友评论