1. iOS国际化

2. 补全缺失的类型
3. 将async-storage，cameraroll，netinfo替换为社区提供的库
4. 更新之前保存图片的代码，添加新的公共Store
5. 优化目录和代码结构

Author: CodeXYu

android/app/build.gradle

@@ -75,7 +75,7 @@ import com.android.build.OutputFile
  */
 
 project.ext.react = [
-    entryFile: "index.js"
+    entryFile: "index_old.js"
 ]
 
 apply from: "../../node_modules/react-native/react.gradle"
@@ -174,6 +174,9 @@ android {
 }
 
 dependencies {
+    implementation project(':@react-native-community_netinfo')
+    implementation project(':@react-native-community_cameraroll')
+    implementation project(':@react-native-community_async-storage')
     implementation project(':react-native-webview')
     implementation project(':rn-fetch-blob')
     implementation project(':react-native-vector-icons')

android/app/src/main/java/com/shitu/MainApplication.java

@@ -5,6 +5,9 @@
 import android.support.multidex.MultiDex;
 
 import com.facebook.react.ReactApplication;
+import com.reactnativecommunity.netinfo.NetInfoPackage;
+import com.reactnativecommunity.cameraroll.CameraRollPackage;
+import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.reactnativecommunity.webview.RNCWebViewPackage;
 import com.RNFetchBlob.RNFetchBlobPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -36,6 +39,9 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new NetInfoPackage(),
+            new CameraRollPackage(),
+            new AsyncStoragePackage(),
             new RNCWebViewPackage(),
             new RNFetchBlobPackage(),
             new VectorIconsPackage(),

android/settings.gradle

@@ -1,4 +1,10 @@
 rootProject.name = 'ShiTu'
+include ':@react-native-community_netinfo'
+project(':@react-native-community_netinfo').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/netinfo/android')
+include ':@react-native-community_cameraroll'
+project(':@react-native-community_cameraroll').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/cameraroll/android')
+include ':@react-native-community_async-storage'
+project(':@react-native-community_async-storage').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/async-storage/android')
 include ':react-native-webview'
 project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
 include ':rn-fetch-blob'

app/components/BaseContainer/index.js

@@ -7,7 +7,8 @@ import React, { Component } from 'react';
 import { View, StyleSheet } from 'react-native';
 
 import { observer } from 'mobx-react';
-import { SafeAreaView, NavigationEvents } from 'react-navigation';
+import { NavigationEvents } from 'react-navigation';
+import NetInfo from '@react-native-community/netinfo';
 
 import { NavigatorBar, LoadingSpinner, ErrorView } from '../index';
 import { Theme } from 'teaset';
@@ -38,15 +39,57 @@ type Props = {
   onWillBlur?: Function,
   onDidBlur?: Function,
 
+  netInfoCallBack?: (network: NetType) => void, // 网络监听回调
+
   ...NavigatorBar.Props
 };
 
+export type NetType = {
+  isConnect: boolean, // 是否连接网络
+  isWifi: boolean, // 是否是wifi连接
+  isCellular: boolean // 是否是流量连接
+};
+
+type State = {
+  netInfo: NetType // 网络状态
+};
+
 @observer
-class BaseContainer extends Component<Props> {
+class BaseContainer extends Component<Props, State> {
+  netInfoListen: any;
   componentWillUnmount() {
-    // Toast.close(0);
+    this.netInfoListen && NetInfo.removeEventListener('connectionChange', this.networkHandle);
   }
 
+  componentDidMount = async () => {
+    // // 添加网络获取判断
+    NetInfo.getConnectionInfo().then(this.networkHandle);
+    // 添加网络监听
+    if (this.netInfoListen) {
+      NetInfo.removeEventListener('connectionChange', this.networkHandle);
+    } else {
+      this.netInfoListen = NetInfo.addEventListener('connectionChange', this.networkHandle);
+    }
+  };
+
+  networkHandle = (netInfo: NetType) => {
+    const { netInfoCallBack } = this.props;
+    const network: NetType = this.getNetInfoStatus(netInfo);
+
+    const { store } = this.props;
+    store && store.setNetInfo(network);
+    netInfoCallBack && netInfoCallBack(network);
+  };
+
+  getNetInfoStatus = (netInfo: any) => {
+    const type: string = netInfo.type;
+    return {
+      isConnect: type.toUpperCase() === 'WIFI' || type.toUpperCase() === 'CELLULAR',
+      isWifi: type.toUpperCase() === 'WIFI',
+      isCellular: type.toUpperCase() === 'CELLULAR'
+    };
+  };
+
   renderContent() {
     const { store, children, onErrorPress, errorTitle, imageSource, errorStyle } = this.props;
     if (!store) return children;
@@ -111,7 +154,7 @@ class BaseContainer extends Component<Props> {
     const marginTop = !isHiddenNavBar ? Theme.statusBarHeight + Theme.navBarContentHeight : 0;
 
     return (
-      <View style={[styles.container, style]} forceInset={{ bottom: 'never', top: 'never' }}>
+      <View style={[styles.container, style]}>
         {!isHiddenNavBar && this.renderNavView()}
         <View style={[styles.contentView, { marginTop, backgroundColor }, style, contentViewStyle]}>
           {this.renderContent()}

app/mobx/Login/index.js

@@ -3,7 +3,7 @@
  * Created by Rabbit on 2018/8/15.
  */
 
-import { AsyncStorage } from 'react-native';
+import AsyncStorage from '@react-native-community/async-storage';
 
 import { observable, action, runInAction } from 'mobx';
 

app/mobx/News/BuDeJieMobx.js

@@ -53,7 +53,7 @@ class BuDeJieMobx extends ConfigStore {
       fontWeight: 'normal',
       fontFamily: Android ? 'normal' : 'Heiti SC'
     });
-    console.log('heights', heights);
+    // console.log('heights', heights);
     return parseFloat(heights.join());
   }
 
@@ -92,7 +92,7 @@ class BuDeJieMobx extends ConfigStore {
       item.itemHeight = USER_INFO_HEIGHT + JokeHeight + ImageHeight + ITEM_HEIGHT_SPACE_HEIGHT;
       // item.itemHeight = USER_INFO_HEIGHT + ImageHeight + ITEM_HEIGHT_SPACE_HEIGHT;
 
-      console.log('itemHeight', item.itemHeight);
+      // console.log('itemHeight', item.itemHeight);
 
       const {
         text,
@@ -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/mobx/News/WelfareMobx.js

@@ -7,10 +7,11 @@ import { observable, action, runInAction } from 'mobx';
 import type { RTGankResult, RTWeal } from '../../servers/News/interfaces';
 import { fetchWelfareData } from '../../servers/News';
 import { System } from '../../utils';
-import FetchBlob from 'rn-fetch-blob';
 import { CameraRoll } from 'react-native';
 import { ConfigStore } from '../../store/ConfigStore';
+import FetchBlob from 'rn-fetch-blob';
 const Dirs = FetchBlob.fs.dirs;
+
 type loadDataType = 'refreshing' | 'load more' | string;
 
 class WelfareMobx extends ConfigStore {

app/pages/News/BuDeJie/index.js

@@ -1,6 +1,6 @@
 /**
  * @flow
- * Created by Rabbit on 2018/5/4.
+ * Created by Rabbit on 2019-03-05.
  */
 
 import React from 'react';
@@ -11,40 +11,54 @@ import BaseContainer from '../../../components/BaseContainer';
 
 import type { RTBDJList, RTWeal } from '../../../servers/News/interfaces';
 import { BuDeJieMobx } from '../../../mobx/News/BuDeJieMobx';
-import { observer } from 'mobx-react';
+import { inject, observer } from 'mobx-react';
 import { BaseItem } from './Components/BaseItem';
 import type { NavigationState } from 'react-navigation';
-import { Overlay } from 'teaset';
+import { ActionSheet, Overlay } from 'teaset';
 import { Button, CustomImage } from '../../../components';
 
 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 { System } from '../../../utils';
+import { PublicStore } from '../../../store/PublicStore';
+// import { ChineseWithLastDateFooter } from 'react-native-spring-scrollview/Customize';
+
 type Props = {
   type: RTBuDeJieType | string,
-  navigate: NavigationState
+  navigate: NavigationState,
+  publicStore: PublicStore
 };
 
+@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();
   }
 
-  onFetch = async (value: any = this.buDeJieMobx.maxtime, startFetch: Function, abortFetch: Function) => {
-    try {
-      const data = await this.buDeJieMobx.fetchBuDeJieData(this.props.type, value);
+  componentDidMount = async () => {
+    const { maxtime } = this.buDeJieMobx;
+    await this.buDeJieMobx.fetchBuDeJieData(this.props.type, maxtime);
+  };
 
-      startFetch(this.buDeJieMobx.dataSource.slice(), 20);
-    } catch (e) {
-      abortFetch();
-      console.log(e);
-    }
+  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);
   };
 
   picturePress = (item: Picture | any) => {
@@ -57,7 +71,10 @@ class BuDeJie extends React.Component<Props, any> {
           overlayOpacity={1}
           ref={v => (this.customPopView = v)}
         >
-          <Button onPress={() => this.customPopView && this.customPopView.close()}>
+          <Button
+            onPress={() => this.customPopView && this.customPopView.close()}
+            onLongPress={() => this.actionSheetToSaveImage(item.cdn_img)}
+          >
             <CustomImage
               source={{ uri: item.cdn_img }}
               resizeMode={'contain'}
@@ -78,8 +95,12 @@ class BuDeJie extends React.Component<Props, any> {
     this.props.navigate('WebView', { uri: item.weixin_url });
   };
 
-  renderItem = ({ item }: { item: RTBDJList, index: number }) => {
+  renderItem = ({ section, row }: { section: number, row: number }) => {
     const { navigate } = this.props;
+    const { largeListData } = this.buDeJieMobx;
+
+    const item = largeListData[section].items[row];
+    // console.log('item-----', item);
     return (
       <BaseItem
         itemData={item}
@@ -94,26 +115,54 @@ class BuDeJie extends React.Component<Props, any> {
   };
 
   render() {
+    const { largeListData, maxtime } = this.buDeJieMobx;
     return (
-      <BaseContainer store={this.buDeJieMobx} isHiddenNavBar={true} isTopNavigator={true}>
-        <TableList
-          style={{ backgroundColor: 'white' }}
-          onFetch={this.onFetch}
-          renderItem={this.renderItem}
-          keyExtractor={item => item.id}
-          initialNumToRender={10}
-          paginationType={'value'}
-          PaginationFetchingView={() => {
-            return [
-              <PlaceholderView type={this.props.type} key={'top'} />,
-              <PlaceholderView type={this.props.type} key={'center'} />,
-              <PlaceholderView type={this.props.type} key={'bottom'} />
-            ];
-          }}
-        />
-      </BaseContainer>
+      <LargeList
+        style={styles.container}
+        data={largeListData}
+        ref={ref => (this._list = ref)}
+        heightForIndexPath={({ section, row }: { section: number, row: number }) => {
+          const item: RTBDJList = largeListData[section].items[row];
+          return item.itemHeight;
+        }}
+        renderIndexPath={this.renderItem}
+        onRefresh={async () => {
+          await this.buDeJieMobx.fetchBuDeJieData(this.props.type, '');
+          this._list.endRefresh();
+        }}
+        // loadingFooter={ChineseWithLastDateFooter}
+        onLoading={async () => {
+          await this.buDeJieMobx.fetchBuDeJieData(this.props.type, maxtime);
+          this._list.endLoading();
+        }}
+      />
     );
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  section: {
+    flex: 1,
+    backgroundColor: 'gray',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  row: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  line: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    bottom: 0,
+    height: 1,
+    backgroundColor: '#EEE'
+  }
+});
+
 export { BuDeJie };