1. 替换不得姐根路由的react-native-scrollable-tab-view为react-native-tab-view

Author: CodeXYu

android/app/build.gradle

@@ -174,6 +174,7 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-reanimated')
     implementation project(':@react-native-community_netinfo')
     implementation project(':@react-native-community_cameraroll')
     implementation project(':@react-native-community_async-storage')

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

@@ -5,6 +5,7 @@
 import android.support.multidex.MultiDex;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.reanimated.ReanimatedPackage;
 import com.reactnativecommunity.netinfo.NetInfoPackage;
 import com.reactnativecommunity.cameraroll.CameraRollPackage;
 import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
@@ -39,6 +40,7 @@ public boolean getUseDeveloperSupport() {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ReanimatedPackage(),
             new NetInfoPackage(),
             new CameraRollPackage(),
             new AsyncStoragePackage(),

android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'ShiTu'
+include ':react-native-reanimated'
+project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/android')
 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'

app/mobx/News/BuDeJieMobx.js

@@ -164,6 +164,7 @@ class BuDeJieMobx extends ConfigStore {
   @action.bound
   async fetchBuDeJieData(type: RTBuDeJieType, value: string) {
     this.showLoading();
+    console.log('不得姐加载');
     try {
       const buDeJieData: RTBDJResult = await loadBuDeJieData(type, value);
 

app/mobx/News/WelfareMobx.js

@@ -47,7 +47,7 @@ class WelfareMobx extends ConfigStore {
     try {
       // 下载图片
       await FetchBlob.config(config).fetch('GET', url);
-      FetchBlob.fs.scanFile([{ path: Dirs.DCIMDir + imageName, mime: '' }])
+      await FetchBlob.fs.scanFile([{ path: Dirs.DCIMDir + imageName, mime: '' }]);
       alert('保存成功');
     } catch (e) {
       console.log(e);
@@ -58,6 +58,7 @@ class WelfareMobx extends ConfigStore {
   @action.bound
   async loadWelfareData(type: loadDataType = 'refreshing') {
     this.showLoading();
+    console.log('福利页加载');
     this.page = type === 'refreshing' ? 1 : this.page + 1;
 
     try {

app/pages/News/News.js

@@ -4,6 +4,7 @@
  */
 
 import React, { useContext, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
 
 import BaseContainer from '../../components/BaseContainer';
 
@@ -22,6 +23,8 @@ import { StoreContext } from '../../utils/Tool';
 import { BaseItem } from './BuDeJie/Components/BaseItem';
 import { BuDeJieMobx } from '../../mobx/News';
 
+import { TabView, TabBar, SceneMap } from 'react-native-tab-view';
+
 type typeItem = {
   title: string,
   type: RTBuDeJieType | string
@@ -35,8 +38,98 @@ const typeArr: Array<typeItem> = [
   { title: '福利', type: '福利' }
 ];
 
-const News = observer(function(props) {
+type State = NavigationState<{
+  key: string,
+  title: string
+}>;
+
+class News extends React.Component<{}, State> {
+  static title = 'Scrollable top bar';
+  static backgroundColor = '#3f51b5';
+  static appbarElevation = 0;
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      index: 0,
+      routes: [
+        { key: 'ALL', title: '全部', type: 1 },
+        { key: 'VIDEO', title: '视频', type: 41 },
+        { key: 'PICTURE', title: '图片', type: 10 },
+        { key: 'JOKE', title: '笑话', type: 29 },
+        { key: 'WELFARE', title: '福利', type: '福利' }
+      ]
+    };
+  }
+  _handleIndexChange = index =>
+    this.setState({
+      index
+    });
+
+  _renderTabBar = props => {
+    console.log('props', props);
+    return (
+      <TabBar
+        {...props}
+        scrollEnabled
+        indicatorStyle={styles.indicator}
+        style={styles.tabbar}
+        tabStyle={styles.tab}
+        labelStyle={styles.label}
+        activeColor={'#4ECBFC'}
+        inactiveColor={'black'}
+        // renderIndicator={() => (
+        //   <View style={{backgroundColor: 'red', height: 1, width: SCREEN_WIDTH / 4 }}/>
+        // )}
+      />
+    );
+  };
+
+  // _renderScene = SceneMap({
+  //   albums: Welfare,
+  //   contacts: BuDeJie,
+  //   article: BuDeJie,
+  //   chat: BuDeJie
+  // });
 
+  _renderScene = ({route, jumpTo}) => {
+    // console.log('route', route);
+    switch (route.key) {
+      case 'WELFARE':
+        return <Welfare jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
+      default:
+        return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
+      // case 'ALL':
+      //   return
+      // case 'VIDEO':
+      //   return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
+      // case 'PICTURE':
+      //   return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
+      // case 'JOKE':
+      //   return <BuDeJie jumpTo={jumpTo} navigation={this.props.navigation} type={route.type} />;
+      //
+    }
+  };
+
+  render() {
+    return (
+      <BaseContainer title={'百思不得姐'} isTopNavigator={true}>
+        <TabView
+          // style={this.props.style}
+          navigationState={this.state}
+          renderScene={this._renderScene}
+          renderTabBar={this._renderTabBar}
+          onIndexChange={this._handleIndexChange}
+          lazy={true}
+          swipeDistanceThreshold={SCREEN_WIDTH / 10}
+          initialLayout={{ width: SCREEN_WIDTH }}
+        />
+      </BaseContainer>
+    );
+  }
+}
+
+const News1 = observer(function(props) {
   const store = useContext(StoreContext);
   const { configStore, publicStore, shiTuStore } = store;
   const { navigation } = props;
@@ -83,4 +176,20 @@ const News = observer(function(props) {
   );
 });
 
+const styles = StyleSheet.create({
+  tabbar: {
+    backgroundColor: 'white'
+  },
+  tab: {
+    width: SCREEN_WIDTH / 5
+  },
+  indicator: {
+    backgroundColor: '#4ECBFC'
+  },
+  label: {
+    fontWeight: 'bold',
+    fontSize: 16
+  }
+});
+
 export { News, Welfare, BuDeJie };

app/pages/News/Welfare/index.js

@@ -36,7 +36,7 @@ const Welfare = observer(function(props: Props) {
   const { publicStore, configStore, shiTuStore } = props;
 
   useEffect(() => {
-    welfareMobx.loadWelfareData('refreshing');
+    loadWelfareData('refreshing');
   }, []);
 
   function actionSheetToSaveImage(item: RTWeal) {