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

接上一篇，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,
  }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98