首页点击跳转，我的保单

android/app/build.gradle

@@ -138,6 +138,8 @@ android {
 }
 
 dependencies {
+    implementation project(':react-native-reanimated')
+    implementation project(':@react-native-community_async-storage')
     implementation project(':react-native-svg')
     implementation project(':react-native-fast-image')
     implementation project(':react-native-gesture-handler')

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

@@ -3,6 +3,8 @@ package com.basicapp;
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import com.swmansion.reanimated.ReanimatedPackage;
+import com.reactnativecommunity.asyncstorage.AsyncStoragePackage;
 import com.horcrux.svg.SvgPackage;
 import com.dylanvann.fastimage.FastImageViewPackage;
 import com.swmansion.gesturehandler.react.RNGestureHandlerPackage;
@@ -31,6 +33,8 @@ public class MainApplication extends Application implements ReactApplication {
     protected List<ReactPackage> getPackages() {
       return Arrays.<ReactPackage>asList(
           new MainReactPackage(),
+            new ReanimatedPackage(),
+            new AsyncStoragePackage(),
             new SvgPackage(),
             new FastImageViewPackage(),
             new RNGestureHandlerPackage(),

android/settings.gradle

 rootProject.name = 'BasicApp'
+include ':react-native-reanimated'
+project(':react-native-reanimated').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-reanimated/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-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-fast-image'

babel.config.js

 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
+  plugins: [
+    ["@babel/plugin-proposal-decorators", { "legacy": true }],
+    ["@babel/transform-runtime", {
+      "helpers": true,
+      "regenerator": false
+    }]
+  ]
 };

package-lock.json

@@ -297,6 +297,16 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-proposal-decorators": {
+      "version": "7.4.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.4.4.tgz",
+      "integrity": "sha512-z7MpQz3XC/iQJWXH9y+MaWcLPNSMY9RQSthrLzak8R8hCj0fuyNk+Dzi9kfNe/JxxlWQ2g7wkABbgWjW36MTcw==",
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.4.4",
+        "@babel/helper-plugin-utils": "^7.0.0",
+        "@babel/plugin-syntax-decorators": "^7.2.0"
+      }
+    },
     "@babel/plugin-proposal-export-default-from": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-export-default-from/-/plugin-proposal-export-default-from-7.2.0.tgz",
@@ -350,6 +360,14 @@
         "@babel/helper-plugin-utils": "^7.0.0"
       }
     },
+    "@babel/plugin-syntax-decorators": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.2.0.tgz",
+      "integrity": "sha512-38QdqVoXdHUQfTpZo3rQwqQdWtCn5tMv4uV6r2RMfTqNBuv4ZBhz79SfaQWKTVmxHjeFv/DnXVC/+agHCklYWA==",
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.0.0"
+      }
+    },
     "@babel/plugin-syntax-dynamic-import": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.2.0.tgz",
@@ -2499,10 +2517,15 @@
         "@types/yargs": "^12.0.9"
       }
     },
+    "@react-native-community/async-storage": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.5.0.tgz",
+      "integrity": "sha512-2yE4RzQ5IL+UTPhuMY0ykNRKHf1m90jOnmp8fcDPUun5U97cXlorjI4p66ovDgF0FuOv8ZpiUKvunGy3qqBxwg=="
+    },
     "@react-native-community/cli": {
-      "version": "1.9.11",
-      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.9.11.tgz",
-      "integrity": "sha512-VVu/tmTTzODfW2xlqIz0pZgeELG2ppPAIgbBEKLgHCO9DMxNZIKSqmei/JqkAi0gEipqQoP6YPAemHPd43lyrA==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/@react-native-community/cli/-/cli-1.10.0.tgz",
+      "integrity": "sha512-48tIWsMKhwbDsKhe5tYcsspsAy7aR3J/yRjdsVh+M2qkKEASe66Xbhiw5RK2nhfzd1IdOdlIxNMiC+9uad6NMQ==",
       "requires": {
         "chalk": "^1.1.1",
         "commander": "^2.19.0",
@@ -11528,6 +11551,11 @@
         "prop-types": "^15.5.10"
       }
     },
+    "react-native-reanimated": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-1.1.0.tgz",
+      "integrity": "sha512-UGDVNfvuIkMqYUx6aytSzihuzv6sWubn0MQi8dRcw7BjgezhjJnVnJ/NSOcpL3cO+Ld7lFcRX6GKcskwkHdPkw=="
+    },
     "react-native-safe-area-view": {
       "version": "0.14.5",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-view/-/react-native-safe-area-view-0.14.5.tgz",
@@ -11588,12 +11616,9 @@
       }
     },
     "react-native-tab-view": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
-      "integrity": "sha512-Bke8KkDcDhvB/z0AS7MnQKMD2p6Kwfc1rSKlMOvg9CC5CnClQ2QEnhPSbwegKDYhUkBI92iH/BYy7hNSm5kbUQ==",
-      "requires": {
-        "prop-types": "^15.6.1"
-      }
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-2.7.1.tgz",
+      "integrity": "sha512-GdKrosksYeDd1VRjb8PSSloY2l5MrNpRHAVxald4p1eiKkvonl7TJ1TN6FeA1wtsy/9x8CJ0dSIWlV/Xyq9R9g=="
     },
     "react-native-update-mutlirn-hg": {
       "version": "3.1.1",
@@ -11854,6 +11879,16 @@
       "integrity": "sha512-T2kaBjY2c4/3I6noWFnaf/c18ntNH5DsST38i+pdc2NPxn5Yi5lkK+ZZTeKuHSFD4a7G0jWY9OGf1iRkHWLMAQ==",
       "requires": {
         "react-native-tab-view": "^1.2.0"
+      },
+      "dependencies": {
+        "react-native-tab-view": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
+          "integrity": "sha512-Bke8KkDcDhvB/z0AS7MnQKMD2p6Kwfc1rSKlMOvg9CC5CnClQ2QEnhPSbwegKDYhUkBI92iH/BYy7hNSm5kbUQ==",
+          "requires": {
+            "prop-types": "^15.6.1"
+          }
+        }
       }
     },
     "react-navigation-redux-helpers": {
@@ -11884,6 +11919,14 @@
           "version": "2.5.5",
           "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
           "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
+        },
+        "react-native-tab-view": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-1.4.1.tgz",
+          "integrity": "sha512-Bke8KkDcDhvB/z0AS7MnQKMD2p6Kwfc1rSKlMOvg9CC5CnClQ2QEnhPSbwegKDYhUkBI92iH/BYy7hNSm5kbUQ==",
+          "requires": {
+            "prop-types": "^15.6.1"
+          }
         }
       }
     },

package.json

@@ -9,12 +9,14 @@
     "postinstall-devTools": "remotedev-debugger --hostname localhost --port 5678 --injectserver"
   },
   "dependencies": {
+    "@babel/plugin-proposal-decorators": "^7.4.4",
+    "@react-native-community/async-storage": "^1.5.0",
     "axios": "^0.18.0",
     "lodash": "^4.17.11",
     "lottie-react-native": "^2.6.1",
     "moment": "^2.24.0",
     "react": "16.8.3",
-    "react-native": "0.59.5",
+    "react-native": "^0.59.5",
     "react-native-device-info": "^2.1.3",
     "react-native-elements": "^1.1.0",
     "react-native-fast-image": "^6.0.3",
@@ -22,10 +24,12 @@
     "react-native-image-header-scroll-view": "^0.10.3",
     "react-native-largelist-v3": "^3.0.14",
     "react-native-linear-gradient": "^2.5.4",
+    "react-native-reanimated": "^1.1.0",
     "react-native-spring-scrollview": "^2.0.22",
     "react-native-super-grid": "^3.0.7",
     "react-native-svg": "^9.5.1",
     "react-native-swiper": "^1.5.14",
+    "react-native-tab-view": "^2.7.1",
     "react-native-update-mutlirn-hg": "^3.1.1",
     "react-native-vector-icons": "^6.4.2",
     "react-navigation": "^3.11.0",

src/BasicNavigator/navigationStack.js

@@ -8,12 +8,14 @@ import {
   createAppContainer,
 } from 'react-navigation';
 import JSPage from '../pages/navigationDemo/JSPage';
-import FramePage from '../pages/home/FramePage';
+import HomePage from '../pages/home/HomePage';
+import PolicyPage from '../pages/home/PolicyPage';
 import ThemePage from '../pages/changeThemePage';
-import NativeComponentList from '../pages/home/NativeComponentList';
-import JSComponentList from '../pages/home/JSComponentList';
+import ServicePage from '../pages/home/ServicePage';
+import UserPage from '../pages/home/UserPage';
 import SectionListDemo from '../pages/sectionListDemo';
 import NativePage from '../pages/navigationDemo/NativePage';
+import InsuranceList from '../pages/InsuranceList';
 import ButtonPage from '../pages/buttonDemo';
 import WaterList from '../pages/waterListDemo';
 import AvatarPage from '../pages/avatarDemo';
@@ -29,16 +31,20 @@ import { TabOptions } from '../components/TabOptions';
 const TabPage = createBottomTabNavigator(
   {
     HomePage: {
-      screen: FramePage,
-      navigationOptions: () => TabOptions('框架', 'Ionicons', 'ios-home'),
+      screen: HomePage,
+      navigationOptions: () => TabOptions('首页', 'Ionicons', 'ios-home'),
+    },
+    PolicyPage: {
+      screen: PolicyPage,
+      navigationOptions: () => TabOptions('保险', 'Ionicons', 'ios-umbrella'),
     },
     MainPage: {
-      screen: NativeComponentList,
-      navigationOptions: () => TabOptions('原生', 'Ionicons', 'ios-bookmarks'),
+      screen: ServicePage,
+      navigationOptions: () => TabOptions('服务', 'Ionicons', 'ios-apps'),
     },
     ServicePage: {
-      screen: JSComponentList,
-      navigationOptions: () => TabOptions('JS', 'Ionicons', 'logo-facebook', '1'),
+      screen: UserPage,
+      navigationOptions: () => TabOptions('我的', 'Ionicons', 'ios-person', '1'),
     },
   },
   {
@@ -119,6 +125,9 @@ const navigator = createStackNavigator({
   TooltipPage: {
     screen: TooltipPage,
   },
+  InsuranceList: {
+    screen: InsuranceList,
+  },
 }, {
   initialRouteName,
   headerMode: 'none',

src/BasicNavigator/reducer.js

@@ -16,6 +16,7 @@ const ActionForNativePage = action => NavigationStack.router
 const initialState = NavigationStack.router.getStateForAction(ActionForTab);
 
 const nav = (state = initialState, action) => {
+  console.log('nav:',action)
   switch (action.type) {
   case PUSH:
     return NavigationStack.router.getStateForAction(ActionForNativePage(action), state);

src/basicStore.js

@@ -4,6 +4,7 @@
 //import _ from 'lodash'
 import devTools from 'remote-redux-devtools';
 import { Platform, AsyncStorage } from 'react-native';
+//import AsyncStorage from '@react-native-community/async-storage';
 import {
   persistStore,
   persistCombineReducers,

src/components/BackButton/index.js

@@ -34,9 +34,10 @@ type BackButtonType = {
   onBackPressed: ()=>void,
   routes: Array,
   imageUrl?: any,
+  style?: Object,
 }
 
-function BackButton({ onBackPressed, imageUrl }: BackButtonType) {
+function BackButton({ onBackPressed, imageUrl, style = {} }: BackButtonType) {
   return (
     <TouchableOpacity
       onPress={() => {
@@ -47,7 +48,7 @@ function BackButton({ onBackPressed, imageUrl }: BackButtonType) {
       <View
         style={styles.buttonIOSAndroid}
       >
-        <Index suite="Ionicons" name="ios-arrow-back" size={26} color="white" />
+        <Index suite="Ionicons" name="ios-arrow-back" size={26} color={style.color || 'white'} />
       </View>
     </TouchableOpacity>
   );

src/components/HeaderView/index.js

@@ -2,12 +2,12 @@
  * @flow
  */
 import React from 'react';
-import { View } from 'react-native';
+import { View, Platform } from 'react-native';
 import FastImage from 'react-native-fast-image';
-import { Avatar } from 'react-native-elements';
 import Text from '../Text';
 import { ENV, resourceURLMapping } from '../../utils/constants';
 import BasicIcon from '../BasicIcon';
+import { iosMarginTop, androidTop } from '../NavigationBar';
 
 
 export function HomeHeader(props) {
@@ -17,6 +17,7 @@ export function HomeHeader(props) {
       alignItems: 'center',
       height: 44,
       width: global.SCREEN_WIDTH,
+      marginTop: Platform.OS === 'ios' ? iosMarginTop : androidTop,
     }}
     >
       <FastImage
@@ -81,6 +82,7 @@ export function UserPageHeader(props) {
       alignItems: 'center',
       height: 44,
       width: global.SCREEN_WIDTH,
+      marginTop: Platform.OS === 'ios' ? iosMarginTop : androidTop,
     }}
     >
       <FastImage
@@ -161,6 +163,29 @@ export function UserPageHeader(props) {
   );
 }
 
+export function ServicePageHeader() {
+  return (
+    <View style={{
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: 44,
+      width: global.SCREEN_WIDTH,
+      marginTop: Platform.OS === 'ios' ? iosMarginTop : androidTop,
+    }}
+    >
+      <Text style={{
+        color: '#333',
+        fontSize: 17,
+        fontWeight: '400',
+      }}
+      >
+        服务
+      </Text>
+    </View>
+  );
+}
+
 export default {
   HomeHeader,
   UserPageHeader,

src/components/NavigationBar/index.js

@@ -20,10 +20,13 @@ export const androidTop = isLessKitKat ? 0 : 24;
 
 const systemVersion = DeviceInfo.getSystemVersion();
 
+export const iosMarginTop = parseInt(systemVersion, 10) < 11 ? 20 : 0;
+
+
 const styles = StyleSheet.create({
   navBarContainer: {
     ios: {
-      marginTop: parseInt(systemVersion, 10) < 11 ? 20 : 0,
+      marginTop: iosMarginTop,
       height: 64,
     },
     android: {
@@ -77,9 +80,9 @@ export type NavBarPropsType = {
 
 function NavigationBar(props: NavBarPropsType) {
   const {
-    style, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
+    style = {}, titleStyle, left, onPress, textStyle, fontStyle, title, right, theme,
   } = props;
-  if (theme.ThemeEndColor) {
+  if (theme.ThemeEndColor && !style.backgroundColor) {
     return (
       <LinearGradient
         start={{ x: 0.0, y: 0.25 }}

src/pages/InsuranceList/index.js

+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { useEffect, useState } from 'react';
+import {
+  View,
+  StyleSheet,
+  NativeAppEventEmitter, TouchableOpacity,
+} from 'react-native';
+import { compose } from 'redux';
+import { connect } from 'react-redux';
+import { LargeList } from 'react-native-largelist-v3';
+import { TabView, TabBar } from 'react-native-tab-view';
+import { push, tab } from '../../BasicNavigator/actions';
+import NavigationBar from '../../components/NavigationBar';
+import BackButton from '../../components/BackButton';
+
+import Styles from '../../theme/Styles';
+import Text from '../../components/Text';
+
+
+type Props = {
+  pushTo: ()=> void,
+  tabTo: ()=> void,
+  theme: Object,
+};
+
+const styles = StyleSheet.create({
+  tabBar: {
+    backgroundColor: 'white',
+  },
+  tab: {
+    width: SCREEN_WIDTH / 3,
+  },
+  indicator: {
+    backgroundColor: '#4ECBFC',
+  },
+  label: {
+    fontWeight: 'bold',
+    fontSize: 16,
+    //color: '#666',
+  },
+});
+
+const typeArr: Array<> = [
+  { key: 'ALL', title: '全部', type: 1 },
+  { key: 'SAVE', title: '保障中', type: 41 },
+  { key: 'EXPIRED', title: '已失效', type: 10 },
+];
+
+const typeData = {
+  index: 0,
+  routes: typeArr,
+};
+
+function JSPage(props: Props) {
+  //console.log('JSPage props from lastPage', this.props.navigation.state);
+  useEffect(() => {
+    console.log('在 dep 改变时触发,若无 dep 则,每次更新组件都会触发');
+    const didFocus = NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call', () => {
+      console.log('JSPage__didFocus');
+    });
+    return () => {
+      console.log('在组件 unmount 时触发');
+      if (didFocus) {
+        didFocus.remove();
+      }
+    };
+  });
+  const [type, setType] = useState(typeData);
+  const [data, setData] = useState([{items: [{ name: '我的保单', page: '' },]}]);
+
+  const _handleIndexChange = (index) => {
+    const _type = {
+      index,
+      routes: typeArr,
+    };
+    setType(_type);
+  }
+  const renderIndexPath = ({ section, row }) => {
+    const { theme, pushTo } = props;
+    const item = data[section].items[row];
+    return (
+      <View
+        key={`${section}-${row}`}
+        style={{ alignItems: 'stretch', justifyContent: 'center', backgroundColor: 'yellow'}}
+      >
+        <TouchableOpacity
+          onPress={() => pushTo(item.page)}
+        >
+          <View style={{ alignItems: 'center', justifyContent: 'center' }}>
+            <Text>
+              {item.name}
+            </Text>
+          </View>
+        </TouchableOpacity>
+        <View style={Styles.line} />
+      </View>
+    );
+  }
+
+  const _renderScene = ({ route, jumpTo }) => {
+    return (
+      <LargeList
+        style={[
+          { flex:1},
+        ]}
+        data={data}
+        heightForIndexPath={() => 50}
+        renderIndexPath={renderIndexPath}
+      />
+    );
+  }
+
+  function _renderTabBar(item) {
+    return (
+      <TabBar
+        {...item}
+        scrollEnabled
+        indicatorStyle={{ backgroundColor: props.theme.ThemeColor }}
+        style={{ backgroundColor: '#fff' }}
+        tabStyle={styles.tab}
+        labelStyle={[styles.label]}
+        activeColor={props.theme.ThemeColor}
+        inactiveColor="#666"
+      />
+    );
+  }
+
+  return (
+    <View style={Styles.container}>
+      <NavigationBar
+        style={{ backgroundColor: '#fff' }}
+        textStyle={{
+          color: '#333',
+          fontSize: 17,
+          fontWeight: '400',
+        }}
+        left={<BackButton style={{color: '#333',}} />}
+        title="我的保单"
+      />
+      <View style={[Styles.container, { justifyContent: 'center' }]}>
+        <TabView
+          navigationState={type}
+          renderScene={_renderScene}
+          renderTabBar={_renderTabBar}
+          onIndexChange={_handleIndexChange}
+          lazy
+          swipeEnabled={false}
+          swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
+          initialLayout={{ width: global.SCREEN_WIDTH }}
+        />
+      </View>
+    </View>
+  );
+}
+
+function propsMapping(props) {
+  const { nav, theme } = props;
+  return {
+    nav,
+    theme,
+  };
+}
+function actionMapping(dispatch) {
+  return {
+    pushTo: compose(dispatch, push),
+    tabTo: compose(dispatch, tab),
+  };
+}
+//const mapDispatchToProps = dispatch => (bindActionCreators({goNext}, dispatch))
+
+export default connect(propsMapping, actionMapping)(JSPage);

src/pages/home/FramePage.js → src/pages/home/HomePage.js

@@ -14,12 +14,13 @@ import CommonLottieFooter from 'react-native-spring-scrollview/Customize/CommonL
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import {
+  NativeAppEventEmitter,
   StyleSheet,
   View,
 } from 'react-native';
 
 import { push } from '../../BasicNavigator/actions';
-import { renderByType } from './renderUtil';
+import { renderByType } from './homeRenderUtil';
 import { HomeHeader } from '../../components/HeaderView';
 
 const data = require('./home.json');
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
 
 const step = 13;
 
-class FramePage extends Component<Props> {
+class HomePage extends Component<Props> {
   constructor(props) {
     super(props);
     this.state = {
@@ -62,10 +63,19 @@ class FramePage extends Component<Props> {
     }, 3000);
   };
 
+componentDidMount() : void {
+  this.listener =NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call',() => console.log('onTransitionEnd_call'))
+}
 
+componentWillUnmount() : void {
+  if(this.listener){
+    this.listener.remove();
+  }
+}
 
 
   render() {
+  const { pushTo } = this.props
     return (
       <View style={styles.container}>
         <HomeHeader />
@@ -83,6 +93,7 @@ class FramePage extends Component<Props> {
             renderByType(item.type)({
               ...item,
               width: global.SCREEN_WIDTH,
+              pushTo,
             })
           ))}
         </SpringScrollView>
@@ -94,7 +105,7 @@ class FramePage extends Component<Props> {
 
 function actionMapping(dispatch) {
   return {
-    push: compose(dispatch, push),
+    pushTo: compose(dispatch, push),
   };
 }
 function propsMapping({ theme }) {
@@ -103,4 +114,4 @@ function propsMapping({ theme }) {
   };
 }
 
-export default connect(propsMapping, actionMapping)(FramePage);
+export default connect(propsMapping, actionMapping)(HomePage);

src/pages/home/PolicyPage.js

+
+/**
+ * Sample React Native App
+ * https://github.com/facebook/react-native
+ *
+ * @format
+ * @flow
+ */
+
+import React, { Component } from 'react';
+import { SpringScrollView } from 'react-native-spring-scrollview';
+import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
+//import CommonLottieFooter from 'react-native-spring-scrollview/Customize/CommonLottieFooter';
+import { connect } from 'react-redux';
+import { compose } from 'redux';
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { push } from '../../BasicNavigator/actions';
+import { renderByType } from './serviceRenderUtil';
+import { ServicePageHeader } from '../../components/HeaderView';
+
+const data = require('./service.json');
+
+type Props = {};
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#F5FCFF',
+  },
+});
+
+const step = 13;
+
+class HomePage extends Component<Props> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: step,
+      allLoaded: false,
+    };
+    this.scrollView = null;
+  }
+
+
+  _onRefresh = () => {
+    setTimeout(() => {
+      this.scrollView.endRefresh();
+      this.setState({ count: step, allLoaded: false });
+    }, 3000);
+  };
+
+  _onLoading = () => {
+    setTimeout(() => {
+      this.scrollView.endLoading();
+      this.setState(p => ({
+        count: p.count + step,
+        allLoaded: false,
+      }));
+    }, 3000);
+  };
+
+  render() {
+    return (
+      <View style={[styles.container, { backgroundColor: 'white' }]}>
+        <ServicePageHeader />
+        <SpringScrollView
+          ref={ref => (this.scrollView = ref)}
+          style={[styles.container, { backgroundColor: '#F4F5F5' }]}
+          inverted={false}
+          onRefresh={this._onRefresh}
+          //onLoading={this._onLoading}
+          // allLoaded={this.state.allLoaded}
+          refreshHeader={CommonLottieHeader}
+          //loadingFooter={CommonLottieFooter}
+        >
+          {data.map((item, index) => (
+            renderByType(item.type)({
+              ...item,
+              width: global.SCREEN_WIDTH,
+            })
+          ))}
+        </SpringScrollView>
+      </View>
+    );
+  }
+}
+
+
+function actionMapping(dispatch) {
+  return {
+    push: compose(dispatch, push),
+  };
+}
+function propsMapping({ theme }) {
+  return {
+    theme,
+  };
+}
+
+export default connect(propsMapping, actionMapping)(HomePage);

src/pages/home/JSComponentList.js → src/pages/home/UserPage.js

@@ -14,12 +14,11 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import FastImage from 'react-native-fast-image';
 import {
-  StyleSheet,
   View,
 } from 'react-native';
 
 import Text from '../../components/Text';
-import BasicIcon from '../../components/BasicIcon';
+import styles from '../../theme/Styles';
 import { push } from '../../BasicNavigator/actions';
 import { renderByType } from './userRenderUtil';
 import { UserPageHeader } from '../../components/HeaderView';
@@ -30,12 +29,6 @@ const data = require('./user.json');
 
 
 type Props = {};
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#F5FCFF',
-  },
-});
 
 const step = 13;
 
@@ -60,6 +53,8 @@ class FramePage extends Component<Props> {
 
   render() {
     const { theme } = this.props;
+    const imgWidth = global.SCREEN_WIDTH - 10;
+    const imgHeight = (global.SCREEN_WIDTH - 10) / 345 * 160;
     return (
       <View style={[styles.container,{backgroundColor: 'white'}]}>
         <UserPageHeader phone="138****8888" color={theme.ThemeColor} />
@@ -73,11 +68,11 @@ class FramePage extends Component<Props> {
           refreshHeader={CommonLottieHeader}
           //loadingFooter={CommonLottieFooter}
         >
-          <View style={{ marginLeft: 15 }}>
+          <View style={{ marginLeft: 5 }}>
             <FastImage
               style={{
-                width: global.SCREEN_WIDTH - 30,
-                height: (global.SCREEN_WIDTH - 30) / 345 * 140,
+                width: imgWidth,
+                height: imgHeight,
 
               }}
               source={{
@@ -88,8 +83,8 @@ class FramePage extends Component<Props> {
             />
             <View
               style={{
-                width: global.SCREEN_WIDTH - 30,
-                height: (global.SCREEN_WIDTH - 30) / 345 * 120,
+                width: imgWidth,
+                height: imgHeight - 20,
                 justifyContent: 'center',
                 alignItems: 'center',
                 position: 'absolute',

src/pages/home/renderUtil.js → src/pages/home/homeRenderUtil.js

@@ -2,7 +2,10 @@
  * @flow
  */
 import React from 'react';
-import { View, ScrollView,
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
 import { FlatGrid } from 'react-native-super-grid';
@@ -37,22 +40,21 @@ const GRID = 1;
 const ACTIVITY = 2;
 const EXTRASRV = 3;
 
-export function swiperItem(data) {
-  const swiperHeight = data.width / 2.7;
-  console.log('width:', data.width, swiperHeight);
+export function swiperItem(props) {
+  const swiperHeight = props.width / 2.7;
+  const { item } = props;
   return (
-    data.data.map((item, index) => (
     <View
-        key={`${item.imgUrl}${index}`}
+      key={`swiperItem${item.imgUrl}`}
       style={{
-          width: data.width,
+        width: props.width,
         height: swiperHeight,
         paddingHorizontal: 10,
         paddingTop: 10,
       }}
     >
       <FastImage
-          style={{ width: data.width - 20, height: swiperHeight - 10 }}
+        style={{ width: props.width - 20, height: swiperHeight - 10 }}
         source={{
           uri: item.imgUrl,
           priority: FastImage.priority.normal,
@@ -60,7 +62,7 @@ export function swiperItem(data) {
         resizeMode={FastImage.resizeMode.stretch}
       />
     </View>
-    ))
+
   );
 }
 
@@ -77,25 +79,28 @@ export function renderBanner(props) {
         height={props.height}
         width={props.width}
       >
-        {swiperItem(props)}
+        {
+          props.data.map((item, index) => (swiperItem({ ...props, item })))
+        }
       </SwiperView>
     </View>
   );
 }
 
-export function renderGrid(props) {
-  const gridwidth = ((props.width) / 4);
-  console.log('renderGrid:', gridwidth);
+
+export const renderGridItem = (props) => {
+  const { item, gridWidth } = props;
   return (
-    <FlatGrid
-      itemDimension={gridwidth}
-      items={props.data}
-      spacing={0}
-      renderItem={({ item,index }) => (
+    <TouchableOpacity
+      onPress={() => {
+        console.log(props, item.tagUrl);
+        props.pushTo(item.tagUrl);
+      }}
+    >
       <View
-          key={`${index}${item.imgUrl}`}
+        key={`${item.imgUrl}`}
         style={{
-            width: gridwidth - 1,
+          width: gridWidth - 1,
           justifyContent: 'center',
           alignItems: 'center',
           marginVertical: 10,
@@ -111,18 +116,32 @@ export function renderGrid(props) {
         />
         <Text
           style={{
-              fontSize:14,
-              color:'#333',
-              marginTop:5,
+            fontSize: 14,
+            color: '#333',
+            marginTop: 5,
           }}
         >
           {item.title}
         </Text>
       </View>
+    </TouchableOpacity>
+  );
+};
+
+export const renderGrid = (props) => {
+  const gridWidth = ((props.width) / 4);
+  console.log('renderGrid:', gridWidth);
+  return (
+    <FlatGrid
+      itemDimension={gridWidth}
+      items={props.data}
+      spacing={0}
+      renderItem={({ item, index }) => (
+        renderGridItem({ ...props, item, gridWidth })
       )}
     />
   );
-}
+};
 
 export function activityItem(item) {
   return (
@@ -164,15 +183,16 @@ export function activityItem(item) {
   );
 }
 
-export function renderTitle(title,marginLeft?) {
+export function renderTitle(title, diyStyle) {
   return (
     <View>
       <Text
         style={{
           fontSize: 18,
-          marginLeft: marginLeft || 10,
+          marginLeft: 10,
           marginTop: 10,
           fontColor: '#20253C',
+          ...diyStyle,
         }}
       >
         {title}
@@ -197,7 +217,14 @@ export function renderActivity(props) {
         showsHorizontalScrollIndicator={false}
       >
         {props.data.map((item, index) => (
-          activityItem(item)
+          <TouchableOpacity
+            onPress={() => {
+              console.log(props.pushTo, item.tagUrl);
+              props.pushTo(item.tagUrl);
+            }}
+          >
+            {activityItem(item)}
+          </TouchableOpacity>
         ))
         }
       </ScrollView>
@@ -221,6 +248,12 @@ export function renderExtraSrv(props) {
         showsHorizontalScrollIndicator={false}
       >
         {props.data.map((item, index) => (
+          <TouchableOpacity
+            onPress={() => {
+              console.log(props.pushTo, item.tagUrl);
+              props.pushTo(item.tagUrl);
+            }}
+          >
             <FastImage
               style={{
                 width: 122,
@@ -233,6 +266,7 @@ export function renderExtraSrv(props) {
               }}
               resizeMode={FastImage.resizeMode.stretch}
             />
+          </TouchableOpacity>
         ))
         }
       </ScrollView>

src/pages/home/serviceRenderUtil.js

+/**
+ * @flow
+ */
+import React from 'react';
+import { View, ScrollView } from 'react-native';
+import FastImage from 'react-native-fast-image';
+import { FlatGrid } from 'react-native-super-grid';
+import Text from '../../components/Text';
+import SwiperView from '../../components/Swiper';
+import { renderTitle } from './homeRenderUtil';
+
+/**
+ *
+ 首页
+ type  0     轮播图
+ type  1     九宫格
+ type  2     活动
+ type  3     商品
+
+ 服务
+
+ type  4  最近使用
+ type  5  标题
+ type  6  九宫格
+ type  7  图片展示
+ type  8  公司名字九宫格
+ type  9  轮播图
+
+ 我的
+ type 10  3列九宫格
+ type 11  带标题4列的九宫格
+ type 12  icon+title       >
+ * @type {number}
+ */
+const USEDLIST = 4;
+const TITLE = 5;
+const GRID = 6;
+const GRID_WITH_TITLE = 8;
+
+export function swiperItem(data) {
+  const swiperHeight = data.width / 2.7;
+  console.log('width:', data.width, swiperHeight);
+  return (
+    data.data.map((item, index) => (
+      <View
+        key={`${item.imgUrl}${index}`}
+        style={{
+          width: data.width,
+          height: swiperHeight,
+          paddingHorizontal: 10,
+          paddingTop: 10,
+        }}
+      >
+        <FastImage
+          style={{ width: data.width - 20, height: swiperHeight - 10 }}
+          source={{
+            uri: item.imgUrl,
+            priority: FastImage.priority.normal,
+          }}
+          resizeMode={FastImage.resizeMode.stretch}
+        />
+      </View>
+    ))
+  );
+}
+
+export function renderBanner(props) {
+  console.log('renderBanner', props);
+  return (
+    <View
+      key="SwiperView"
+      style={{
+        height: props.height,
+      }}
+    >
+      <SwiperView
+        height={props.height}
+        width={props.width}
+      >
+        {swiperItem(props)}
+      </SwiperView>
+    </View>
+  );
+}
+
+export function renderGrid(props) {
+  const gridWidth = ((props.width) / 4);
+  console.log('renderGrid:', gridWidth);
+  return (
+    <FlatGrid
+      style={{ backgroundColor: props.backgroundColor, }}
+      itemDimension={gridWidth}
+      items={props.data}
+      spacing={0}
+      renderItem={({ item, index }) => (
+        <View
+          key={`${index}${item.imgUrl}`}
+          style={{
+            width: gridWidth - 1,
+            justifyContent: 'center',
+            alignItems: 'center',
+            marginVertical: 25,
+          }}
+        >
+          <FastImage
+            style={{ width: 36, height: 36 }}
+            source={{
+              uri: item.imgUrl,
+              priority: FastImage.priority.normal,
+            }}
+            resizeMode={FastImage.resizeMode.stretch}
+          />
+          <Text
+            style={{
+              fontSize: 14,
+              color: '#333',
+              marginTop: 5,
+            }}
+          >
+            {item.title}
+          </Text>
+        </View>
+      )}
+    />
+  );
+}
+
+export function renderOnlyTitle(props) {
+  return (
+    <View style={{ marginTop: 10, backgroundColor: '#FFF'}}>
+      {
+        renderTitle(props.title)
+      }
+    </View>
+  );
+}
+
+export function renderUsedList(props) {
+  return (
+    <View style={{ marginTop: 10, backgroundColor: '#FFF' }}>
+      {
+        renderTitle(props.title,)
+      }
+      <View style={{height:10,backgroundColor: '#FFF'}} />
+    </View>
+  );
+}
+
+
+export function renderGridWithTitle(props) {
+  return (
+    <View style={{ backgroundColor: '#F7FBFF', marginTop: 10 }}>
+      {
+        renderTitle(props.title, { fontSize: 16, color: '#0E6DCF' })
+      }
+      <View style={{ marginVertical: 10 }}>
+        {
+          renderGrid({...props,backgroundColor: '#F7FBFF'})
+        }
+      </View>
+    </View>
+  );
+}
+
+export function renderOnlyGrid(props) {
+  return renderGrid({ ...props,backgroundColor: '#FFF' });
+}
+
+export function renderByType(type) {
+  switch (type) {
+  case USEDLIST:
+    return renderUsedList;
+  case GRID:
+    return renderGrid;
+  case TITLE:
+    return renderOnlyTitle;
+  case GRID_WITH_TITLE:
+    return renderGridWithTitle;
+  default:
+    return () => {
+    };
+  }
+}
+
+export default {};

src/pages/home/userRenderUtil.js

@@ -9,7 +9,7 @@ import { ListItem } from 'react-native-elements';
 import FastImage from 'react-native-fast-image';
 import { FlatGrid } from 'react-native-super-grid';
 import Text from '../../components/Text';
-import { renderTitle } from './renderUtil';
+import { renderTitle } from './homeRenderUtil';
 import BasicIcon from '../../components/BasicIcon';
 
 /**
@@ -108,7 +108,7 @@ function render4Column(props) {
     <View>
       <View style={{ height: 10, backgroundColor: '#F4F5F5' }} />
       {
-        renderTitle(props.title, marginLeft)
+        renderTitle(props.title, { marginLeft })
       }
       {
         renderGrid(props)
@@ -121,10 +121,13 @@ function renderTable(props) {
   return (
     <View>
       {
-        props.data.map((item, i) => (
+        props.data.map((item, index) => (
           <ListItem
-            containerStyle={{borderBottomWidth: 0.3, borderBottomColor:'#ccc'}}
-            key={`renderTable${i}`}
+            key={`renderTable${index}`}
+            containerStyle={{
+              borderBottomWidth: index < props.data.length - 1 ? 0.3 : 0,
+              borderBottomColor: '#ccc',
+            }}
             title={item.title}
             titleStyle={{ color: '#666', fontSize: 14 }}
             leftElement={(
@@ -141,7 +144,7 @@ function renderTable(props) {
               <BasicIcon
                 suite="Ionicons"
                 name="ios-arrow-forward"
-                size={16}
+                size={24}
                 color="#666"
               />
             )}

src/theme/Styles.js

@@ -20,7 +20,7 @@ const Styles = {
    */
   container: {
     flex: 1,
-    flexDirection: 'column',
+    //flexDirection: 'column',
     //paddingTop: Metrics.baseMargin,
     backgroundColor: Colors.background,
   },

src/utils/Decorator/index.js

+/**
+ * @flow
+ */
+import validate from './validate';
+
+
+export default {
+  validate,
+};

src/utils/Decorator/validate.js

+/**
+ * 此注解如果赋值的时候匹配到的类型有问题，会在控制台显示警告
+ * @param type CheckType 中定义的类型
+ * @returns {Function}
+ * @constructor
+ */
+export default function validateDecorator(type){
+  return function (target, name, descriptor){
+    let v = descriptor.initializer && descriptor.initializer.call(this);
+    /**
+     * 将属性名字以及需要的类型的对应关系记录到类的原型上
+     */
+    if (!target.constructor.__checkers__) {
+      // 将这个隐藏属性定义成 not enumerable，遍历的时候是取不到的。
+      Object.defineProperty(target.constructor, "__checkers__", {
+        value: {},
+        enumerable: false,
+        writeable: true,
+        configurable: true
+      });
+    }
+    target.constructor.__checkers__[name] = {
+      type: type,
+    };
+    return descriptor;
+  };
+}

src/utils/i18n/i18n.config.js

+/**
+ * @flow
+ */
+import hk from './hk';
+import zh from './zh';
+// import zu from './zu'
+import { getLanguagSetting } from '../languageUtils';
+
+
+let languageCode = 'zh'
+const localLanguage = {}
+localLanguage.translations = zh
+export const getLanuageCode = async () => {
+  languageCode = await getLanguagSetting()
+  switch (languageCode) {
+  case 'zh-hk':
+  case 'zh-HK':
+    localLanguage.translations = hk;
+    break;
+    // case 'zu':
+    //   localLanguage.translations = zu
+    //   break
+  default:
+    localLanguage.translations = zh;
+    break;
+  }
+}
+
+export default localLanguage;

src/utils/i18n/index.js

+/**
+ * @flow
+ */
+import localLanguage from './i18n.config';
+
+export default localLanguage;

src/utils/languageUtils.js

+/**@flow
+ * Created by shiyunjie on 2019/3/19.
+ */
+import {
+  Platform,
+  AsyncStorage,
+} from 'react-native';
+//import { AssetsModule } from './native-utils'
+
+
+export const getLanguagSetting = async () => {
+  let lanuage = 'zh-cn'
+  if (Platform.OS === 'android') {
+    lanuage = await AsyncStorage.getItem('LANGUAGE_SELECT');
+  } else {
+    lanuage = await AsyncStorage.getItem('kUserLanguage');
+  }
+  return lanuage || 'zh-cn';
+};
+
+export default {};

src/utils/native-utils.js

@@ -2,23 +2,7 @@
  * @flow
  */
 
-import { NativeModules } from 'react-native'
+import { NativeModules } from 'react-native';
 
-export const HybridDevice = NativeModules.HybridDevice
-export const HybridPush = NativeModules.HybridPush || {}
-//export const HybridShare = NativeModules.HybridShare
-//export const LogReporter = NativeModules.HybridLog
-export const HybridMBjca = NativeModules.HybridMBjca
-export const HybridAsrTts = NativeModules.HybridAsrTts
-export const HybridFile = NativeModules.HybridFile
-export const HybridModalAlert = NativeModules.HybridModalAlert
-export const HotUpdate = NativeModules.HotUpdate
-export const UmengShareModule = NativeModules.UmengShareModule
-export const ShareModule = NativeModules.nShareModel
-export const OcrModule = NativeModules.OcrModule
-export const ExitRNModule = NativeModules.ExitRNRootView
-export const AssetsModule = NativeModules.AssetsModule
-export const BDLocationModule = NativeModules.BDLocationModule
-export const NativeCompressedModule = NativeModules.NativeCompressedModule
-export const AndroidMultiImageSelector = NativeModules.multiImageSelector
-export const GrowingIO = NativeModules.GrowingIO
+//export const ShareModule = NativeModules.nShareModel
+//export const ExitRNModule = NativeModules.ExitRNRootView