react-native实践日记–6.ReactNative 项目版本升级，0.61到0.72升级的问题记录（二）

本文介绍: 在升级过程中，发现 react–native–scroll able–tab–view 这个 tab 插件，这是一个 tab 导航栏插件，可以实现切换页面、页面滚动、下拉刷新、上拉加载更多等，功能还是很强大的，只是官方的版本已经很久没更新了，无法兼容 react–native@0.72，但一时又找不到更好的插件代替，只能先试着改下源码兼容下新版本。还好在github上已经有人提出解决方案了，找出问题代码，改一下就好了。四、t ab 插件：react–native–scroll a ble–t a b–view。

接上一篇，Re a ctNa ti v e 项目升级，0.61到0.72的升级问题。
在升级过程中，发现 re a ct–native–scroll a ble–t a b–v iew这个 t ab插件，这是一个 t ab导航栏插件，可以实现切换页面、页面滚动、下拉刷新、上拉加载更多等，功能还是很强大的，只是官方的版本已经很久没更新了，无法兼容 re act-native@0.72，但一时又找不到更好的插件代替，只能先试着改下源码兼容下新版本。还好在github上已经有人提出解决方案了，找出问题代码，改一下就好了。

四、tab插件：re act-nat i v e–scrollable-tab-v iew

由于GitHub上已经做了部分兼容修改，故更改 package.json中的依赖地址：“re act-nat i v e–scrollable-tab-v iew”: “https://github.com/pto mas ro os/re act-nat ive-scrollable-tab-view”,并修改部分源码；

//ScrollableTabBar.js，找到ref={'tabContainer'}并注释掉
<View
          style={[styles.tabs, {width: this.state._containerWidth, }, this.props.tabsContainerStyle, ]}
          // ref={'tabContainer'}
          onLayout={this.onTabContainerLayout}
        &gt;
          {this.props.tabs.map((name, page) =&gt; {
            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,
  }