广州建站快车,建站前端模板,直播app软件开发定制,网页制作的超文本标记语言称为接上一篇#xff0c;ReactNative项目升级#xff0c;0.61到0.72的升级问题。 在升级过程中#xff0c;发现react-native-scrollable-tab-view这个tab插件#xff0c;这是一个tab导航栏插件#xff0c;可以实现切换页面、页面滚动、下拉刷新、上拉加载更多等#xff0c;功…接上一篇ReactNative项目升级0.61到0.72的升级问题。 在升级过程中发现react-native-scrollable-tab-view这个tab插件这是一个tab导航栏插件可以实现切换页面、页面滚动、下拉刷新、上拉加载更多等功能还是很强大的只是官方的版本已经很久没更新了无法兼容react-native0.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,}
