hooks重写搜索页面

Author: fmtjava

declare.d.ts

@@ -1,5 +1,6 @@
 declare module '*.png';
 declare module 'react-native-refresh-list-view';
+declare module 'react-native-animated-header';
 declare module 'react-native-share';
 declare module 'react-native-masonry-list';
 declare module 'dva-model-extend' {

package.json

@@ -28,6 +28,7 @@
     "moment": "^2.29.1",
     "react": "16.13.1",
     "react-native": "0.63.3",
+    "react-native-animated-header": "^1.0.7",
     "react-native-config": "^1.4.1",
     "react-native-fast-image": "^8.3.4",
     "react-native-gesture-handler": "^1.9.0",

ts/page/discover/CategoryDetailPage.tsx

@@ -1,12 +1,15 @@
 import React, {useEffect} from 'react';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 import RefreshListView, {RefreshState} from 'react-native-refresh-list-view';
+import AnimatedHeader from 'react-native-animated-header';
 import {RootState} from '@/model/dva/Models';
 import {ListRenderItemInfo, StyleSheet, View} from 'react-native';
 import {RouteProp} from '@react-navigation/native';
 import {RootNavigation, RootStackParamList} from '@/navigator/Router';
 import {Item} from '@/model/Daily';
 import ImageTextItem from '@/components/ImageTextItem';
+import FastImage from 'react-native-fast-image';
+import {ScreenWidth} from '@/utils/Utils';
 
 const CLEAR_TYPE = 'categoryDetail/setState';
 const REFRESH_TYPE = 'categoryDetail/onRefresh';
@@ -60,15 +63,6 @@ function CategoryDetailPage(props: IProps) {
     };
   }, [dispatch]);
 
-  const onHeaderRefresh = () => {
-    dispatch({
-      type: REFRESH_TYPE,
-      payload: {
-        id: props.route.params.item.id,
-      },
-    });
-  };
-
   const onFooterRefresh = () => {
     if (nextPageUrl == null) {
       return;
@@ -90,24 +84,46 @@ function CategoryDetailPage(props: IProps) {
   };
 
   return (
-    <View style={styles.container}>
+    <AnimatedHeader
+      style={styles.container}
+      title="Happy coding"
+      backStyle={{marginLeft: 10}}
+      backTextStyle={{fontSize: 14, color: '#000'}}
+      titleStyle={{fontSize: 22, left: 20, bottom: 20, color: '#000'}}
+      headerMaxHeight={200}
+      imageSource={() => (
+        <FastImage
+          style={styles.headImage}
+          source={{
+            uri:
+              'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201804%2F28%2F20180428114906_ulvqd.jpg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633255088&t=5de32951b8196587f44772fc590a6456',
+          }}
+        />
+      )}
+      toolbarColor="#FFF"
+      disabled={false}>
       <RefreshListView
         data={dataList}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         refreshState={refreshState}
-        onHeaderRefresh={onHeaderRefresh}
         onFooterRefresh={onFooterRefresh}
         showsVerticalScrollIndicator={false}
       />
-    </View>
+    </AnimatedHeader>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     backgroundColor: '#fff',
   },
+  headImage: {
+    width: ScreenWidth,
+    height: 200,
+    borderRadius: 4,
+  },
 });
 
 export default CategoryDetailPage;

ts/page/search/SearchPage.tsx

@@ -54,15 +54,17 @@ function SearchPage() {
   const keyword = useRef('');
 
   const dispatch = useDispatch();
-  const {
-    showLoading,
-    showKeyWorkContainer,
-    keyWordList,
-    dataList,
-    refreshState,
-    nextPageUrl,
-    total,
-  } = useSelector(mapStateToProps, shallowEqual);
+
+  const {showLoading} = useSelector(mapStateToProps, shallowEqual);
+
+  const {showKeyWorkContainer} = useSelector(mapStateToProps, shallowEqual);
+
+  const {keyWordList} = useSelector(mapStateToProps, shallowEqual);
+
+  const {dataList, refreshState, nextPageUrl, total} = useSelector(
+    mapStateToProps,
+    shallowEqual,
+  );
 
   useEffect(() => {
     dispatch({
@@ -141,42 +143,6 @@ function SearchPage() {
     return <SearchVideoComponent item={item} />;
   };
 
-  const ContentContainer = () => {
-    if (showLoading) {
-      return (
-        <Spinner
-          visible={showLoading}
-          textContent={'Loading...'}
-          textStyle={styles.spinnerTextStyle}
-        />
-      );
-    }
-    if (dataList == null || dataList.length === 0) {
-      return <KeyWordContainerOrEmpty />;
-    }
-    return (
-      <View style={styles.searchVideoContainer}>
-        <Text style={styles.searchKey}>
-          — 「{keyword.current}」搜索结果共{total}个 —
-        </Text>
-        <RefreshListView
-          data={dataList}
-          keyExtractor={keyExtractor}
-          renderItem={renderItem}
-          refreshState={refreshState}
-          onHeaderRefresh={onHeaderRefresh}
-          onFooterRefresh={onFooterRefresh}
-          showsVerticalScrollIndicator={false}
-          getItemLayout={(_data: Item, index: number) => ({
-            length: FeedHeight,
-            offset: FeedHeight * index,
-            index,
-          })}
-        />
-      </View>
-    );
-  };
-
   const KeyWordContainerOrEmpty = () => {
     if (showKeyWorkContainer) {
       return (
@@ -247,7 +213,44 @@ function SearchPage() {
         </View>
         <SearchView />
       </View>
-      <ContentContainer />
+      {showLoading && (
+        <>
+          <Spinner
+            visible={showLoading}
+            textContent={'Loading...'}
+            textStyle={styles.spinnerTextStyle}
+          />
+        </>
+      )}
+      {dataList == null ||
+        (dataList.length === 0 && (
+          <>
+            <KeyWordContainerOrEmpty />
+          </>
+        ))}
+      {total > 0 && (
+        <>
+          <View style={styles.searchVideoContainer}>
+            <Text style={styles.searchKey}>
+              — 「{keyword.current}」搜索结果共{total}个 —
+            </Text>
+            <RefreshListView
+              data={dataList}
+              keyExtractor={keyExtractor}
+              renderItem={renderItem}
+              refreshState={refreshState}
+              onHeaderRefresh={onHeaderRefresh}
+              onFooterRefresh={onFooterRefresh}
+              showsVerticalScrollIndicator={false}
+              getItemLayout={(_data: Item, index: number) => ({
+                length: FeedHeight,
+                offset: FeedHeight * index,
+                index,
+              })}
+            />
+          </View>
+        </>
+      )}
     </SafeAreaView>
   );
 }

yarn.lock

@@ -6090,6 +6090,11 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.13.1, react-is@^16.7.0, react
   resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz?cache=0&sync_timestamp=1608330338071&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Freact-is%2Fdownload%2Freact-is-16.13.1.tgz"
   integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
 
+react-native-animated-header@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.nlark.com/react-native-animated-header/download/react-native-animated-header-1.0.7.tgz#df9793e60b86e9106b31dcb1a3f2ef4ac37c0db9"
+  integrity sha1-35eT5guG6RBrMdyxo/LvSsN8Dbk=
+
 react-native-config@^1.4.1:
   version "1.4.1"
   resolved "https://registry.npm.taobao.org/react-native-config/download/react-native-config-1.4.1.tgz"