1. 重构福利，不得姐页面

2. 为configStore添加网络判断的方法
3. 解决webView页闪退的bug
4. 优化代码

Author: CodeXYu

app/index.js

@@ -7,9 +7,6 @@ import React, { useEffect } from 'react';
 import { View, ActivityIndicator, DeviceEventEmitter, BackHandler, ToastAndroid } from 'react-native';
 
 import { AuthLoadingRouter } from './routers/AuthLoading';
-// import {SafeAreaView} from 'react-navigation';
-import { Toast } from './components';
-import { Provider } from 'mobx-react';
 import * as rootStore from './store/RootStore';
 
 import SplashScreen from 'react-native-splash-screen';

app/mobx/News/BuDeJieMobx.js

@@ -183,7 +183,7 @@ class BuDeJieMobx extends ConfigStore {
         });
       }
 
-      // console.log('this.largeListData.slice', this.largeListData.slice());
+      console.log('this.largeListData.slice', this.largeListData.slice());
     } catch (e) {
       this.showErrorView(e.message);
       console.log('e', e.message);

app/pages/News/BuDeJie/Components/BaseItem.js

@@ -8,14 +8,12 @@ import { View, StyleSheet } from 'react-native';
 
 import { RTBDJList, ToolBar, UserInfo, Joke, Picture } from '../../../../servers/News/interfaces';
 import { ContainerItem } from './Items/ContainerItem';
-import type { NavigationState } from 'react-navigation';
 
 import { UserInfoView } from './Views/UserInfoView';
 import { ToolBarView } from './Views/ToolBarView';
 
 type Props = {
   itemData: RTBDJList,
-  navigate: NavigationState,
   itemPress: Function,
   picturePress: Function,
   videoPress: Function

app/pages/News/BuDeJie/index.js

@@ -3,15 +3,14 @@
  * Created by Rabbit on 2019-03-05.
  */
 
-import React from 'react';
-import { StyleSheet, Text, View, Image, FlatList, Modal, ActivityIndicator } from 'react-native';
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet } from 'react-native';
 
-import { TableList } from '../../../components';
 import BaseContainer from '../../../components/BaseContainer';
 
 import type { RTBDJList, RTWeal } from '../../../servers/News/interfaces';
 import { BuDeJieMobx } from '../../../mobx/News/BuDeJieMobx';
-import { inject, observer } from 'mobx-react';
+import { observer, useObservable } from 'mobx-react-lite';
 import { BaseItem } from './Components/BaseItem';
 import type { NavigationState } from 'react-navigation';
 import { ActionSheet, Overlay } from 'teaset';
@@ -21,59 +20,55 @@ import { Picture } from '../../../servers/News/interfaces';
 import PlaceholderView from './Components/Views/PlaceholderView';
 import type { RTBuDeJieType } from '../../../servers/News';
 
-import { LargeList } from 'react-native-largelist-v3';
+import { LargeList, WaterfallList } from 'react-native-largelist-v3';
 import { System } from '../../../utils';
 import { PublicStore } from '../../../store/PublicStore';
+import { ConfigStore } from '../../../store/ConfigStore';
 // import { ChineseWithLastDateFooter } from 'react-native-spring-scrollview/Customize';
 
 type Props = {
   type: RTBuDeJieType | string,
-  navigate: NavigationState,
-  publicStore: PublicStore
+  navigation: NavigationState,
+  publicStore: PublicStore,
+  configStore: ConfigStore
 };
 
-@inject('publicStore')
-@observer
-class BuDeJie extends React.Component<Props, any> {
-  buDeJieMobx: BuDeJieMobx;
-  customPopView: any;
-  _list: LargeList;
-
-  constructor(props: Props) {
-    super(props);
-    this.buDeJieMobx = new BuDeJieMobx();
-  }
+function actionSheetToSaveImage(url: string, props: Props) {
+  const { saveImageWithIOS, saveImageWithAndroid } = props.publicStore;
+  const items = [
+    {
+      title: '保存图片',
+      onPress: () => (System.iOS ? saveImageWithIOS(url) : saveImageWithAndroid(url))
+    }
+  ];
+  const cancelItem = { title: '取消' };
+  ActionSheet.show(items, cancelItem);
+}
+const BuDeJie = observer(function(props: Props) {
+  const { navigation, type } = props;
+  const buDeJieMobx = useObservable(new BuDeJieMobx());
+  const { largeListData, maxtime = '', fetchBuDeJieData } = buDeJieMobx;
 
-  componentDidMount = async () => {
-    const { maxtime } = this.buDeJieMobx;
-    await this.buDeJieMobx.fetchBuDeJieData(this.props.type, maxtime);
-  };
+  const waterfallRef: WaterfallList = useRef();
+  const customOverlayRef: Overlay = useRef();
 
-  actionSheetToSaveImage = (url: string) => {
-    const { saveImageWithIOS, saveImageWithAndroid } = this.props.publicStore;
-    const items = [
-      {
-        title: '保存图片',
-        onPress: () => (System.iOS ? saveImageWithIOS(url) : saveImageWithAndroid(url))
-      }
-    ];
-    const cancelItem = { title: '取消' };
-    ActionSheet.show(items, cancelItem);
-  };
+  useEffect(() => {
+    fetchBuDeJieData(type, '');
+  }, []);
 
-  picturePress = (item: Picture | any) => {
+  function picturePress(item: Picture, props: Props) {
     if (item.isLongPicture || !item.is_gif) {
-      this.props.navigate('WebView', { uri: item.weixin_url });
+      navigation.navigate('WebView', { uri: item.weixin_url });
     } else {
       const overlayView = (
         <Overlay.PopView
           style={{ alignItems: 'center', justifyContent: 'center' }}
           overlayOpacity={1}
-          ref={v => (this.customPopView = v)}
+          ref={customOverlayRef}
         >
           <Button
-            onPress={() => this.customPopView && this.customPopView.close()}
-            onLongPress={() => this.actionSheetToSaveImage(item.cdn_img)}
+            onPress={() => customOverlayRef && customOverlayRef.current.close()}
+            onLongPress={() => actionSheetToSaveImage(item.cdn_img, props)}
           >
             <CustomImage
               source={{ uri: item.cdn_img }}
@@ -89,56 +84,50 @@ class BuDeJie extends React.Component<Props, any> {
       );
       Overlay.show(overlayView);
     }
-  };
-
-  videoPress = (item: Picture) => {
-    this.props.navigate('WebView', { uri: item.weixin_url });
-  };
+  }
 
-  renderItem = ({ section, row }: { section: number, row: number }) => {
-    const { navigate } = this.props;
-    const { largeListData } = this.buDeJieMobx;
+  function videoPress(item: Picture) {
+    navigation.navigate('WebView', { uri: item.weixin_url });
+  }
 
+  function renderItem({ section, row }: { section: number, row: number }) {
     const item = largeListData[section].items[row];
-    // console.log('item-----', item);
     return (
       <BaseItem
         itemData={item}
-        navigate={navigate}
         itemPress={() => {
           alert(item.text);
         }}
-        picturePress={() => this.picturePress(item)}
-        videoPress={() => this.videoPress(item)}
+        picturePress={() => picturePress(item, props)}
+        videoPress={() => videoPress(item)}
       />
     );
-  };
+  }
 
-  render() {
-    const { largeListData, maxtime } = this.buDeJieMobx;
-    return (
+  return (
+    <BaseContainer isHiddenNavBar={true} isTopNavigator={true} store={buDeJieMobx}>
       <LargeList
         style={styles.container}
         data={largeListData}
-        ref={ref => (this._list = ref)}
+        ref={waterfallRef}
         heightForIndexPath={({ section, row }: { section: number, row: number }) => {
           const item: RTBDJList = largeListData[section].items[row];
           return item.itemHeight;
         }}
-        renderIndexPath={this.renderItem}
+        renderIndexPath={renderItem}
         onRefresh={async () => {
-          await this.buDeJieMobx.fetchBuDeJieData(this.props.type, '');
-          this._list.endRefresh();
+          await fetchBuDeJieData(type, '');
+          waterfallRef.current.endRefresh();
         }}
         // loadingFooter={ChineseWithLastDateFooter}
         onLoading={async () => {
-          await this.buDeJieMobx.fetchBuDeJieData(this.props.type, maxtime);
-          this._list.endLoading();
+          await fetchBuDeJieData(type, maxtime);
+          waterfallRef.current.endLoading();
         }}
       />
-    );
-  }
-}
+    </BaseContainer>
+  );
+});
 
 const styles = StyleSheet.create({
   container: {

app/pages/News/News.js

@@ -13,33 +13,35 @@ import { observer } from 'mobx-react-lite';
 import ScrollableTabView, { DefaultTabBar } from 'react-native-scrollable-tab-view';
 
 import { Welfare } from './Welfare';
-// import { BuDeJie } from './BuDeJie';
 import { BuDeJie } from './BuDeJie';
-import { BuDeJieDetail } from './BuDeJieDetail';
+// import { BuDeJieDetail } from './BuDeJieDetail';
 
 import type { NavigationState } from 'react-navigation';
 import type { RTBuDeJieType } from '../../servers/News';
 import { StoreContext } from '../../utils/Tool';
+import { BaseItem } from './BuDeJie/Components/BaseItem';
+import { BuDeJieMobx } from '../../mobx/News';
 
 type typeItem = {
   title: string,
   type: RTBuDeJieType | string
 };
 
 const typeArr: Array<typeItem> = [
-  { title: '福利', type: '福利' },
-  { title: '笑话', type: 29 },
-  { title: '图片', type: 10 },
   { title: '全部', type: 1 },
-  { title: '视频', type: 41 }
+  { title: '视频', type: 41 },
+  { title: '图片', type: 10 },
+  { title: '笑话', type: 29 },
+  { title: '福利', type: '福利' }
 ];
 
 const News = observer(function(props) {
+
   const store = useContext(StoreContext);
   const { configStore, publicStore, shiTuStore } = store;
-  const { navigate } = props.navigation;
+  const { navigation } = props;
 
-  console.log('store', store);
+  // console.log('store', store);
 
   return (
     <BaseContainer title={'百思不得姐'} isTopNavigator={true}>
@@ -53,12 +55,11 @@ const News = observer(function(props) {
         tabBarTextStyle={{ fontSize: 15 }}
       >
         {typeArr.map((item, i) => {
-          if (i === 0) {
+          if (i === 4) {
             return (
               <Welfare
                 tabLabel={item.title}
                 key={i}
-                navigate={navigate}
                 configStore={configStore}
                 publicStore={publicStore}
                 shiTuStore={shiTuStore}
@@ -70,7 +71,8 @@ const News = observer(function(props) {
                 type={item.type}
                 tabLabel={item.title}
                 key={i}
-                navigate={navigate}
+                navigation={navigation}
+                configStore={configStore}
                 publicStore={publicStore}
               />
             );
@@ -81,4 +83,4 @@ const News = observer(function(props) {
   );
 });
 
-export { News, Welfare, BuDeJie, BuDeJieDetail };
+export { News, Welfare, BuDeJie };

app/pages/News/Welfare/index.js

@@ -31,8 +31,8 @@ type Props = {
 
 const Welfare = observer(function(props: Props) {
   const { dataSource, isRefreshing, loadWelfareData } = welfareMobx;
-  const scrollViewRef: WaterfallList = useRef();
-  const customPopView: Overlay = useRef();
+  const waterfallRef: WaterfallList = useRef();
+  const customOverlayRef: Overlay = useRef();
   const { publicStore, configStore, shiTuStore } = props;
 
   useEffect(() => {
@@ -65,11 +65,11 @@ const Welfare = observer(function(props: Props) {
         style={{ alignItems: 'center', justifyContent: 'center' }}
         overlayOpacity={1}
         type="zoomOut"
-        ref={customPopView}
+        ref={customOverlayRef}
       >
         <Button
           onLongPress={() => actionSheetToSaveImage(item)}
-          onPress={() => customPopView && customPopView.current.close()}
+          onPress={() => customOverlayRef && customOverlayRef.current.close()}
         >
           <CustomImage
             source={{ uri: item.largeUrl }}
@@ -96,19 +96,19 @@ const Welfare = observer(function(props: Props) {
 
   return (
     <WaterfallList
-      ref={scrollViewRef}
+      ref={waterfallRef}
       data={dataSource}
       style={styles.container}
       heightForItem={item => item.height + 10}
       preferColumnWidth={SCREEN_WIDTH / 2 - 10}
       renderItem={renderItem}
       onRefresh={() => {
         loadWelfareData('refreshing');
-        !isRefreshing && scrollViewRef.current.endRefresh(); // 报错
+        !isRefreshing && waterfallRef.current.endRefresh(); // 报错
       }}
       onLoading={async () => {
         loadWelfareData('load more');
-        scrollViewRef && scrollViewRef.current.endLoading();
+        waterfallRef && waterfallRef.current.endLoading();
       }}
       // loadingFooter={NormalFooter}
     />

app/pages/WebView/index.js

@@ -28,7 +28,7 @@ type State = {
   isForWard: boolean
 };
 
-@inject('configStore')
+// @inject('configStore')
 export default class index extends React.Component<Props, State> {
   webView: WebView;
 
@@ -49,7 +49,7 @@ export default class index extends React.Component<Props, State> {
   }
 
   componentWillUnmount() {
-    this.props.configStore.hideLoading();
+    // this.props.configStore.hideLoading();
     StatusBar.setHidden(false);
   }
 
@@ -110,14 +110,14 @@ export default class index extends React.Component<Props, State> {
   };
   onLoadEnd = () => {
     console.log('加载结束，成功或失败都会走到这里');
-    this.props.configStore.hideLoading();
+    // this.props.configStore.hideLoading();
   };
   onLoadStart = () => {
     console.log('开始加载');
-    this.props.configStore.showLoading();
+    // this.props.configStore.showLoading();
   };
   onError = () => {
-    this.props.configStore.hideLoading();
+    // this.props.configStore.hideLoading();
     Alert.alert(
       '加载失败',
       null,

app/routers/AppRouter.js

@@ -11,7 +11,7 @@ import { System } from '../utils/index';
 import { CustomIcon, Theme } from '../components/index';
 
 import { ShiTu } from '../pages/ShiTu/index';
-import { News, Welfare, BuDeJie, BuDeJieDetail } from '../pages/News/News';
+import { News, Welfare, BuDeJie } from '../pages/News/News';
 import { Main } from '../pages/Main/index';
 import WebView from '../pages/WebView/index';
 import { Login } from '../pages/Login';
@@ -142,9 +142,6 @@ export const AppRouter = createStackNavigator(
     BuDeJie: {
       screen: BuDeJie
     },
-    BuDeJieDetail: {
-      screen: BuDeJieDetail
-    },
     WebView: {
       screen: WebView
     },