react-native的ScrollableTabView滚动到指定位置

最近在探索react-native,加群聊没人理我的问题就退了,百度起来坑多多,一万只草泥马路过,好了言归正传

看了上面两张图,惊奇发现我的”首页“和”日历“都加上了ScrollableTabView这个家伙,当然了,react-native-scrollable-tab-view这个组件你们要自己引入,百度一抓一大把,我就不多说了。然后慢慢入坑,再慢慢调试到你突然发现有个需求,要做一个日历,左边和右边分别是当前日期的前一个月和后一个月,就好像今天是2018年6月28日,左边是前一个月包含了30条数据,右边是后一个月也要30条数据,虽然听起来感觉有病,后面怎么可能有数据尼?后面都是放假通知嘛,怎么会没有是吧。


不管是首页还是日历,因为我们引入ScrollableTabView的时候都是同一个组件,所以我们只能到组件里面去改,我们只需要修改\node_modules\react-native-scrollable-tab-view下的ScrollableTabBar.js,别的不动,其实就加上下面这一段代码。因为首页和日历都用到了这个组件,所以加了一个判断,JSON.stringify(position.scrollValue)的数值要跟initialPage一样,要不然就会出现问题,我的initialPage是30,目前适配了多款iPhone。

componentWillUpdate(position,activeTab, scrollOffset, tabStyle) {

//this.props.underlineStyle.width =76.15;

if(JSON.stringify(position.scrollValue)==30){

const {activeTab, scrollOffset, tabStyle} = this.props;

const tabWidth = tabStyle.width || scrollOffset;

const onlyTabWidth = this.props.underlineStyle.width;

const containerWidth = WINDOW_WIDTH;

let newScrollX = (activeTab+1) * onlyTabWidth;

newScrollX -= (containerWidth) / 2- onlyTabWidth;

this.props.scrollValue.addListener(this.updateView);

this._scrollView.scrollTo({ x: newScrollX, y: 0, animated: false, });

}

},

你可能感兴趣的:(react-native的ScrollableTabView滚动到指定位置)