Merge pull request #27 from itenl/dev-1.1.6

Dev 1.1.6

Author: itenl

README-zh_CN.md

@@ -163,6 +163,7 @@ Prop              | Type     | Default     | Description
 **`onTabviewChanged`**             | Function    | null          | Tab切换完成回调 (回调含有 **`index`**, **`tabLabel`** 两个形参)
 **`screenScrollThrottle`**             | Number    | 60          | **`Screen`** 横向滑动时节流参数,单位 (毫秒)
 **`header`**             | Function / JSX Element / Class Component    | null          | 顶部组件 (若是函数需要返回 Element)
+**`stickyHeader`**             | Function / JSX Element / Class Component    | null          | 顶部带吸顶效果组件 (若是函数需要返回 Element)
 **`oneTabHidden`**             | Boolean    | false          | 仅一个Tab时将隐藏自身
 **`enableCachePage`**             | Boolean    | true          | 是否持久化页面切换后不销毁
 **`carouselProps`**             | Object    | {}          | 传递给 Carousel 的剩余属性 < [阅读 Carousel](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md) >

README.md

@@ -163,6 +163,7 @@ Prop              | Type     | Default     | Description
 **`onTabviewChanged`**             | Function    | null          | Tab switch completion callback (callback contains **`index`**, **`tabLabel`** two formal parameters)
 **`screenScrollThrottle`**             | Number    | 60          | **`Screen`** Throttle parameters during lateral sliding, Unit (ms)
 **`header`**             | Function / JSX Element / Class Component    | null          | Top component (if the function needs to return Element)
+**`stickyHeader`**             | Function / JSX Element / Class Component    | null          | Top component (if the function needs to return Element) for sticky
 **`oneTabHidden`**             | Boolean    | false          | Hide itself when there is only one Tab
 **`enableCachePage`**             | Boolean    | true          | Whether the persistent page will not be destroyed after switching
 **`carouselProps`**             | Object    | {}          | The remaining attributes passed to Carousel < [Read Carousel](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md) >

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itenl/react-native-scrollable-tabview",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "react-native-scrollable-tabview",
   "main": "index.js",
   "scripts": {

src/index.js

@@ -28,6 +28,7 @@ export default class ScrollableTabView extends React.Component {
     firstIndex: PropTypes.number,
     mappingProps: PropTypes.object,
     header: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    stickyHeader: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
     badges: PropTypes.array,
     tabsStyle: PropTypes.object,
     tabWrapStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -69,6 +70,7 @@ export default class ScrollableTabView extends React.Component {
     firstIndex: null,
     mappingProps: {},
     header: null,
+    stickyHeader: null,
     badges: [],
     tabsStyle: {},
     tabWrapStyle: {},
@@ -118,7 +120,7 @@ export default class ScrollableTabView extends React.Component {
     this._initial();
   }
 
-  componentWillReceiveProps(newProps) {
+  UNSAFE_componentWillReceiveProps(newProps) {
     this._initial(newProps, true);
   }
 
@@ -141,6 +143,7 @@ export default class ScrollableTabView extends React.Component {
     this.layoutHeight = {
       container: 0,
       header: 0,
+      stickyHeader: 0,
       tabs: 0,
       screen: 0
     };
@@ -285,6 +288,7 @@ export default class ScrollableTabView extends React.Component {
   _scrollTo = y => {
     if (typeof y == 'number') {
       this.section &&
+        this.section.scrollToLocation &&
         this.section.scrollToLocation({
           itemIndex: 0,
           viewOffset: 0 - y
@@ -331,7 +335,7 @@ export default class ScrollableTabView extends React.Component {
   _renderSticky() {
     const stacks = this.props.stacks[this.state.checkedIndex];
     const ref = this.getCurrentRef();
-    if (stacks && stacks.sticky && typeof stacks.sticky == 'function' && ref) {
+    if (stacks && stacks.sticky && typeof stacks.sticky == 'function' && ref && stacks.__id__ === ref.__id__) {
       // 用于自动同步 Screen 数据流改变后仅会 render 自身 Screen 的问题，用于自动同步 screenContext 给吸顶组件
       if (this.props.syncToSticky && !ref.__isOverride__) {
         const originalDidUpdate = ref.componentDidUpdate,
@@ -496,6 +500,7 @@ export default class ScrollableTabView extends React.Component {
     return (
       <View style={{ flex: 1 }}>
         {this._renderHeader(fixedHeader)}
+        {this._renderStickyHeader()}
         {this._renderTabs()}
         {this._renderSticky()}
       </View>
@@ -524,7 +529,7 @@ export default class ScrollableTabView extends React.Component {
     if (!this.stacks[index]) return;
     const { enableCachePage, toHeaderOnTab, toTabsOnTab, onTabviewChanged } = this.props;
     if (index == this.state.checkedIndex) {
-      if (!isCarouselScroll && toHeaderOnTab) return this._scrollTo(-this.layoutHeight['header']);
+      if (!isCarouselScroll && toHeaderOnTab) return this._scrollTo(-(this.layoutHeight['header'] + this.layoutHeight['stickyHeader']));
       if (!isCarouselScroll && toTabsOnTab) return this._scrollTo(0);
       return void 0;
     }
@@ -556,12 +561,12 @@ export default class ScrollableTabView extends React.Component {
   }
 
   _getScreenHeight() {
-    this.layoutHeight['screen'] = this.layoutHeight['container'] - (this.layoutHeight['header'] + this.layoutHeight['tabs']);
+    this.layoutHeight['screen'] = this.layoutHeight['container'] - (this.layoutHeight['header'] + this.layoutHeight['stickyHeader'] + this.layoutHeight['tabs']);
     return this.layoutHeight['screen'];
   }
 
   _getMaximumScreenHeight() {
-    return this.layoutHeight['container'] - this.layoutHeight['tabs'];
+    return this.layoutHeight['container'] - this.layoutHeight['stickyHeader'] - this.layoutHeight['tabs'];
   }
 
   _renderItem({ item, index }) {
@@ -632,6 +637,23 @@ export default class ScrollableTabView extends React.Component {
     );
   };
 
+  _renderStickyHeader = () => {
+    const { stickyHeader } = this.props;
+    return (
+      stickyHeader && (
+        <View
+          onLayout={({ nativeEvent }) => {
+            const { height } = nativeEvent.layout;
+            this.layoutHeight['stickyHeader'] = height;
+            if (height !== 0) this._refresh();
+          }}
+        >
+          {typeof stickyHeader === 'function' ? stickyHeader() : stickyHeader}
+        </View>
+      )
+    );
+  };
+
   _renderTitle = () => {
     const { title, titleArgs } = this.props;
     if (!title) return null;
@@ -720,6 +742,7 @@ export default class ScrollableTabView extends React.Component {
               <AnimatedCarousel
                 ref={c => (this.tabview = c)}
                 pagingEnabled={true}
+                inactiveSlideOpacity={1}
                 inactiveSlideScale={1}
                 data={this.stacks}
                 renderItem={this._renderItem}