接上一篇,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'}并注释掉
<View
style={[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,
}