v4.0.0-rc12

zyslife · Jul 17, 2021 · 2089e4c · 2089e4c
1 parent 4971e80
commit 2089e4c
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 23 deletions.
diff --git a/Example/react-native-head-tab-view/README.md b/Example/react-native-head-tab-view/README.md
@@ -1,6 +1,6 @@
 # React Native Head Tab View
 
-:tada::tada::tada: v4.0.0-rc.11 has been released, I hope you can help me test and collect questions.
+:tada::tada::tada: v4.0.0-rc.12 has been released, I hope you can help me test and collect questions.
 In this version, there is a big change. All animations will run on the UI thread, which will make the components much smoother. Unfortunately, the version requiring React Native is greater than 0.62.0. Because we rely on `react-native-reanimated2.0`, that's what it requires.  
 
 Here are some changes and optimizations.
@@ -232,6 +232,7 @@ yarn add react-native-tab-view-collapsible-header
 
 
 
+
     
 
 - If your tabs component is react-native-scrollable-tab-view  
@@ -338,6 +339,7 @@ When the maximum drop-down distance is reached(refreshHeight+overflowPull), the
 
 
 
+
 ##### `index`  _(number)_   (require)  
 
 The number of the screen.  
@@ -360,6 +362,10 @@ Whether the scene is refreshing
 
 A custom RefreshControl for scene
 
+##### `renderLoadingView` _((headerHeight: number) => React.ReactElement)_  
+
+You can provide a LoadingView when the scene is transparent until the height of the onContentSizeRange callback is less than minHeight.
+
 ##### `enableSnap` _(boolean)_ 
 
 When it stops sliding, it automatically switches to the folded and expanded states.

diff --git a/Example/react-native-head-tab-view/createCollapsibleScrollView.tsx b/Example/react-native-head-tab-view/createCollapsibleScrollView.tsx
@@ -40,6 +40,7 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
         onStartRefresh,
         onContentSizeChange,
         onScrollBeginDrag,
+        renderLoadingView,
         ContainerView,
         isRefreshing: _isRefreshing = false,
         renderRefreshControl: _renderRefreshControl,
@@ -226,7 +227,7 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
     //adjust the scene size
     const _onContentSizeChange = useCallback((contentWidth: number, contentHeight: number) => {
         onContentSizeChange && onContentSizeChange(contentWidth, contentHeight)
-
+        
         //Some mobile phones measure less than their actual height. And the difference in height is not more than a pixel
         if (Math.ceil(contentHeight) >= expectHeight) {
             syncInitialPosition(isRefreshing.value ? shareAnimatedValue.value - refreshHeight : shareAnimatedValue.value);
@@ -355,22 +356,29 @@ const SceneComponent: React.FC<NormalSceneProps & HPageViewProps> = (
     })
 
     return (
-        <Animated.View style={[styles.container, sceneStyle]}>
-            <Animated.View style={[styles.container, animatedStyle]}>
-                <MemoList
-                    panRef={panRef}
-                    ContainerView={ContainerView}
-                    zForwardedRef={_scrollView}
-                    onScroll={onScrollAnimateEvent}
-                    onContentSizeChange={_onContentSizeChange}
-                    bounces={bouncesEnabled}
-                    headerHeight={calcHeight}
-                    expectHeight={expectHeight}
-                    {...restProps}
-                />
+        <Animated.View style={[styles.container]}>
+            {opacityValue.value !== 1 && renderLoadingView ?
+                <Animated.View style={StyleSheet.absoluteFill}>
+                    {renderLoadingView(headerHeight)}
+                </Animated.View> : null}
+            <Animated.View style={[styles.container, sceneStyle]}>
+                <Animated.View style={[styles.container, animatedStyle]}>
+                    <MemoList
+                        panRef={panRef}
+                        ContainerView={ContainerView}
+                        zForwardedRef={_scrollView}
+                        onScroll={onScrollAnimateEvent}
+                        onContentSizeChange={_onContentSizeChange}
+                        bounces={bouncesEnabled}
+                        headerHeight={calcHeight}
+                        expectHeight={expectHeight}
+                        {...restProps}
+                    />
+                </Animated.View>
+                {renderRefreshControl()}
             </Animated.View>
-            {renderRefreshControl()}
         </Animated.View>
+
     )
 
 }

diff --git a/Example/react-native-head-tab-view/index.d.ts b/Example/react-native-head-tab-view/index.d.ts
@@ -95,6 +95,11 @@ export interface NormalSceneBaseProps extends CommonSceneProps {
      * A custom RefreshControl for scene
      */
     renderRefreshControl?: (refreshProps: RefreshControlProps) => React.ReactElement;
+    /**
+     * You can provide a LoadingView 
+     * when the scene is transparent until the height of the onContentSizeRange callback is less than minHeight.
+     */
+    renderLoadingView?: (headerHeight: number) => React.ReactElement;
 }
 
 export interface SceneConfig {

diff --git a/Example/react-native-head-tab-view/types.tsx b/Example/react-native-head-tab-view/types.tsx
@@ -27,6 +27,7 @@ export interface NormalSceneBaseProps extends CommonSceneProps {
     isRefreshing?: boolean;
     onStartRefresh?: () => void;
     renderRefreshControl?: (refreshProps: RefreshControlProps) => React.ReactElement;
+    renderLoadingView?: (headerHeight: number) => React.ReactElement;
 }
 
 export interface IGestureContainerProps extends CollapsibleHeaderProps {

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # React Native Head Tab View
 
-:tada::tada::tada: v4.0.0-rc.11 has been released, I hope you can help me test and collect questions.
+:tada::tada::tada: v4.0.0-rc.12 has been released, I hope you can help me test and collect questions.
 In this version, there is a big change. All animations will run on the UI thread, which will make the components much smoother. Unfortunately, the version requiring React Native is greater than 0.62.0. Because we rely on `react-native-reanimated2.0`, that's what it requires.  
 
 Here are some changes and optimizations.
@@ -209,12 +209,12 @@ yarn add react-native-tab-view-collapsible-header
 
 ## Version
 
-| react-native-head-tab-view | react-native-scrollable-tab-view | react-native-tab-view-collapsible-header |
-| :------------------------: | :------------------------------: | :--------------------------------------: |
-|          v1 ~ v2           |                -                 |                    -                     |
-|             v3             |                v0                |                    v0                    |
-|          v4-rc.1           |                v1                |                    v1                    |
-|          v4-rc.2~          |                v2                |                    v2                    |
+| react-native-head-tab-view | react-native-scrollable-tab-view-collapsible-header | react-native-tab-view-collapsible-header |
+| :------------------------: | :-------------------------------------------------: | :--------------------------------------: |
+|          v1 ~ v2           |                          -                          |                    -                     |
+|             v3             |                         v0                          |                    v0                    |
+|          v4-rc.1           |                         v1                          |                    v1                    |
+|          v4-rc.2~          |                         v2                          |                    v2                    |
 
 ## Linking    
 
@@ -231,6 +231,8 @@ yarn add react-native-tab-view-collapsible-header
 
 
 
+
+
     
 
 - If your tabs component is react-native-scrollable-tab-view  
@@ -336,6 +338,8 @@ When the maximum drop-down distance is reached(refreshHeight+overflowPull), the
 
 
 
+
+
 ##### `index`  _(number)_   (require)  
 
 The number of the screen.  
@@ -358,6 +362,10 @@ Whether the scene is refreshing
 
 A custom RefreshControl for scene
 
+##### `renderLoadingView` _((headerHeight: number) => React.ReactElement)_  
+
+You can provide a LoadingView when the scene is transparent until the height of the onContentSizeRange callback is less than minHeight.
+
 ##### `enableSnap` _(boolean)_ 
 
 When it stops sliding, it automatically switches to the folded and expanded states.