接上一篇，ReactNative项目升级，0.61到0.72的升级问题。
在升级过程中，发现react-native-scrollable-tab-view这个tab插件，这是一个tab导航栏插件，可以实现切换页面、页面滚动、下拉刷新、上拉加载更多等，功能还是很强大的，只是官方的版本已经很久没更新了，无法兼容react-native@0.72，但一时又找不到更好的插件代替，只能先试着改下源码兼容下新版本。还好在github上已经有人提出解决方案了，找出问题代码，改一下就好了。
四、tab插件：react-native-scrollable-tab-view
由于GitHub上已经做了部分兼容修改，故更改package.json中的依赖地址：“react-native-scrollable-tab-view”: “https://github.com/ptomasroos/react-native-scrollable-tab-view”,并修改部分源码；
//ScrollableTabBar.js，找到ref={'tabContainer'}并注释掉
<Viewstyle={[styles.tabs, {width: this.state._containerWidth, }, this.props.tabsContainerStyle, ]}// ref={'tabContainer'}onLayout={this.onTabContainerLayout}>{this.props.tabs.map((name, page) => {const isTabActive = this.props.activeTab === page;const renderTab = this.props.renderTab || this.renderTab;return renderTab(name, page, isTabActive, this.props.goToPage, this.measureTab.bind(this, page));})}<Animated.View style={[tabUnderlineStyle, dynamicTabUnderline, this.props.underlineStyle, ]} />
</View>//ViewPager.js修改VIEW_PAGER_REF相关的两处：ref={VIEW_PAGER_REF}和this.$refs[VIEW_PAGER_REF].getInnerViewNode()getInnerViewNode = (): ReactComponent => {return this.pageView.getInnerViewNode();
};
render() {return (<NativeViewPager{...this.props}ref={pageView => (this.pageView = pageView)}style={this.props.style}onPageScroll={this._onPageScroll}onPageScrollStateChanged={this._onPageScrollStateChanged}onPageSelected={this._onPageSelected}onMoveShouldSetResponderCapture={this._onMoveShouldSetResponderCapture}children={childrenWithOverriddenStyle(this.props.children)}/>);}//DefaultTabBar.js、index.js、ScrollableTabBar.js
//找出下面的这个引用，
const { ViewPropTypes } = ReactNative = require('react-native');
//改成如下引用：
const ReactNative = require('react-native');
const DeprecatedPropTypes = require('deprecated-react-native-prop-types');
//将页面中用到ViewPropTypes的改为DeprecatedPropTypes相关/*** DefaultTabBar.js ***/
propTypes: {goToPage: PropTypes.func,activeTab: PropTypes.number,tabs: PropTypes.array,backgroundColor: PropTypes.string,activeTextColor: PropTypes.string,inactiveTextColor: PropTypes.string,textStyle: DeprecatedPropTypes.TextPropTypes.style,tabStyle: DeprecatedPropTypes.ViewPropTypes.style,renderTab: PropTypes.func,underlineStyle: DeprecatedPropTypes.ViewPropTypes.style,},/*** index.js ***/
propTypes: {tabBarPosition: PropTypes.oneOf(['top', 'bottom', 'overlayTop', 'overlayBottom', ]),initialPage: PropTypes.number,page: PropTypes.number,onChangeTab: PropTypes.func,onScroll: PropTypes.func,renderTabBar: PropTypes.any,tabBarUnderlineStyle: DeprecatedPropTypes.ViewPropTypes.style,tabBarBackgroundColor: PropTypes.string,tabBarActiveTextColor: PropTypes.string,tabBarInactiveTextColor: PropTypes.string,tabBarTextStyle: PropTypes.object,style: DeprecatedPropTypes.ViewPropTypes.style,contentProps: PropTypes.object,scrollWithoutAnimation: PropTypes.bool,locked: PropTypes.bool,prerenderingSiblingsNumber: PropTypes.number,},/*** ScrollableTabBar.js ***/
propTypes: {goToPage: PropTypes.func,activeTab: PropTypes.number,tabs: PropTypes.array,backgroundColor: PropTypes.string,activeTextColor: PropTypes.string,inactiveTextColor: PropTypes.string,scrollOffset: PropTypes.number,style: DeprecatedPropTypes.ViewPropTypes.style,tabStyle: DeprecatedPropTypes.ViewPropTypes.style,tabsContainerStyle: DeprecatedPropTypes.ViewPropTypes.style,textStyle: DeprecatedPropTypes.TextPropTypes.style,renderTab: PropTypes.func,underlineStyle: DeprecatedPropTypes.ViewPropTypes.style,onScroll: PropTypes.func,}
