React Native之ScrollableTabView i

作者: 8ba7c349861d | 来源:发表于2017-10-09 14:39 被阅读172次

    最近在进行项目框架重构,在重构的过程中,遇到了诸多问题,今天在调试程序的时候发现一个问题:顶部的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

    相关文章

      网友评论

        本文标题:React Native之ScrollableTabView i

        本文链接:https://www.haomeiwen.com/subject/nlqpyxtx.html