保险产品详情页

App.js

@@ -17,19 +17,6 @@ const instructions = Platform.select({
     'Shake or press menu button for dev menu',
 });
 
-type Props = {};
-export default class App extends Component<Props> {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>Welcome to React Native!</Text>
-        <Text style={styles.instructions}>To get started, edit App.js</Text>
-        <Text style={styles.instructions}>{instructions}</Text>
-      </View>
-    );
-  }
-}
-
 const styles = StyleSheet.create({
   container: {
     flex: 1,
@@ -48,3 +35,18 @@ const styles = StyleSheet.create({
     marginBottom: 5,
   },
 });
+
+type Props = {};
+export default class App extends Component<Props> {
+  render() {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>Welcome to React Native!</Text>
+        <Text style={styles.instructions}>To get started, edit App.js</Text>
+        <Text style={styles.instructions}>{instructions}</Text>
+      </View>
+    );
+  }
+}
+
+

README.md

@@ -5,9 +5,7 @@
 
 ## 前言
 
-前人栽树，后人乘凉。Agera的主要目的是
-
-基于客户通项目封装，设计参考交银e保通，交银爱行销
+Agera基于客户通项目封装，设计参考交银e保通，交银爱行销
 
 Agera一期，要建立稳定的演示环境，演示在线投保（包括空中签名、保单签收），培训，绩效查询，行销工具
 
@@ -59,6 +57,10 @@ trainPage
 
 achievement
 
+setting
+
+login
+
 原生webview
 
 原生启动图

ios/BasicApp.xcodeproj/project.pbxproj

@@ -14,7 +14,6 @@
 		00C302EA1ABCBA2D00DB3ED1 /* libRCTVibration.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 00C302E41ABCB9EE00DB3ED1 /* libRCTVibration.a */; };
 		00E356F31AD99517003FC87E /* BasicAppTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* BasicAppTests.m */; };
 		0E3F3C3B82CD4C10948E6344 /* Entypo.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 99E1BFFB629F466DAB4074DD /* Entypo.ttf */; };
-		0F8BB7B3815B4E99BA722DA3 /* Lottie.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = BDC32CC575074F1BB2B7F5EC /* Lottie.framework */; };
 		11D1A2F320CAFA9E000508D9 /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5E9157331DD0AC6500FF2AA8 /* libRCTAnimation.a */; };
 		12A3942C23004AF49A81C49F /* libLottieReactNative.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 8152F9826A9C45E1985E1CB9 /* libLottieReactNative.a */; };
 		133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 78C398B91ACF4ADC00677621 /* libRCTLinking.a */; };
@@ -56,6 +55,8 @@
 		6068B983236A42738266D0CE /* libLottie.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 5CD923ED2B8C4C44B328B1B0 /* libLottie.a */; };
 		7D086754CFF647B296C82959 /* FontAwesome5_Brands.ttf in Resources */ = {isa = PBXBuildFile; fileRef = 8BEF1FB779D54460BAA6C75D /* FontAwesome5_Brands.ttf */; };
 		832341BD1AAA6AB300B99B32 /* libRCTText.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 832341B51AAA6A8300B99B32 /* libRCTText.a */; };
+		83CA52CD22D8EFD0005440C0 /* Lottie.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 836D007C22C6345500DC9A54 /* Lottie.framework */; };
+		83CA52CE22D8EFD0005440C0 /* Lottie.framework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = 836D007C22C6345500DC9A54 /* Lottie.framework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
 		83FA0E6422CAE564000CDF1B /* libART.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 83FA0E2A22CAE546000CDF1B /* libART.a */; };
 		97D73CDBCBBF483C99E06DBA /* FontAwesome.ttf in Resources */ = {isa = PBXBuildFile; fileRef = A45B683174C84617B17BFEB8 /* FontAwesome.ttf */; };
 		9BD4B34961424375BF4F1F92 /* libRNGestureHandler.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D2F86DBC4936427193CB045A /* libRNGestureHandler.a */; };
@@ -454,6 +455,13 @@
 			remoteGlobalIDString = A287971D1DE0C0A60081BDFA;
 			remoteInfo = FastImage;
 		};
+		83CA52CF22D8EFD0005440C0 /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = 9E9FB8BA5F684112B34F24E8 /* Lottie.xcodeproj */;
+			proxyType = 1;
+			remoteGlobalIDString = 62CA59B71E3C173B002D7188;
+			remoteInfo = Lottie_iOS;
+		};
 		83F2776D22B25E860066BA73 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = DC7A0D31E6A74DA6B87DABB7 /* RNDeviceInfo.xcodeproj */;
@@ -512,6 +520,20 @@
 		};
 /* End PBXContainerItemProxy section */
 
+/* Begin PBXCopyFilesBuildPhase section */
+		83CA52D122D8EFD1005440C0 /* Embed Frameworks */ = {
+			isa = PBXCopyFilesBuildPhase;
+			buildActionMask = 2147483647;
+			dstPath = "";
+			dstSubfolderSpec = 10;
+			files = (
+				83CA52CE22D8EFD0005440C0 /* Lottie.framework in Embed Frameworks */,
+			);
+			name = "Embed Frameworks";
+			runOnlyForDeploymentPostprocessing = 0;
+		};
+/* End PBXCopyFilesBuildPhase section */
+
 /* Begin PBXFileReference section */
 		0089D8B24EC54781BF75BC39 /* libRNReanimated-tvOS.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = "libRNReanimated-tvOS.a"; sourceTree = "<group>"; };
 		00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTActionSheet.xcodeproj; path = "../node_modules/react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj"; sourceTree = "<group>"; };
@@ -604,6 +626,7 @@
 				11D1A2F320CAFA9E000508D9 /* libRCTAnimation.a in Frameworks */,
 				146834051AC3E58100842450 /* libReact.a in Frameworks */,
 				00C302E51ABCBA2D00DB3ED1 /* libRCTActionSheet.a in Frameworks */,
+				83CA52CD22D8EFD0005440C0 /* Lottie.framework in Frameworks */,
 				00C302E71ABCBA2D00DB3ED1 /* libRCTGeolocation.a in Frameworks */,
 				00C302E81ABCBA2D00DB3ED1 /* libRCTImage.a in Frameworks */,
 				133E29F31AD74F7200F7D852 /* libRCTLinking.a in Frameworks */,
@@ -616,7 +639,6 @@
 				5049979F956343A58ED88DD1 /* libRNSpringScrollView.a in Frameworks */,
 				465A4413D3ED482699A0A651 /* libRNDeviceInfo.a in Frameworks */,
 				E7E9E85166CA4272AB0CF4FE /* libBVLinearGradient.a in Frameworks */,
-				0F8BB7B3815B4E99BA722DA3 /* Lottie.framework in Frameworks */,
 				6068B983236A42738266D0CE /* libLottie.a in Frameworks */,
 				12A3942C23004AF49A81C49F /* libLottieReactNative.a in Frameworks */,
 				9BD4B34961424375BF4F1F92 /* libRNGestureHandler.a in Frameworks */,
@@ -1061,10 +1083,12 @@
 				13B07F8C1A680F5B00A75B9A /* Frameworks */,
 				13B07F8E1A680F5B00A75B9A /* Resources */,
 				00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
+				83CA52D122D8EFD1005440C0 /* Embed Frameworks */,
 			);
 			buildRules = (
 			);
 			dependencies = (
+				83CA52D022D8EFD0005440C0 /* PBXTargetDependency */,
 			);
 			name = BasicApp;
 			productName = "Hello World";
@@ -1739,7 +1763,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
 		};
 		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -1805,6 +1829,11 @@
 			target = 2D02E47A1E0B4A5D006451C7 /* BasicApp-tvOS */;
 			targetProxy = 2D02E4911E0B4A5D006451C7 /* PBXContainerItemProxy */;
 		};
+		83CA52D022D8EFD0005440C0 /* PBXTargetDependency */ = {
+			isa = PBXTargetDependency;
+			name = Lottie_iOS;
+			targetProxy = 83CA52CF22D8EFD0005440C0 /* PBXContainerItemProxy */;
+		};
 /* End PBXTargetDependency section */
 
 /* Begin PBXVariantGroup section */
@@ -1955,6 +1984,7 @@
 				CODE_SIGN_STYLE = Manual;
 				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = K3P7TW9FM8;
+				GCC_OPTIMIZATION_LEVEL = s;
 				HEADER_SEARCH_PATHS = (
 					"$(inherited)",
 					"$(SRCROOT)/../node_modules/react-native-vector-icons/RNVectorIconsManager",

ios/BasicApp.xcodeproj/xcshareddata/xcschemes/BasicApp.xcscheme

@@ -80,9 +80,9 @@
       </AdditionalOptions>
    </TestAction>
    <LaunchAction
-      buildConfiguration = "Release"
-      selectedDebuggerIdentifier = ""
-      selectedLauncherIdentifier = "Xcode.IDEFoundation.Launcher.PosixSpawn"
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
       launchStyle = "0"
       useCustomWorkingDirectory = "NO"
       ignoresPersistentStateOnLaunch = "NO"

src/BasicNavigator/navigationStack.js

@@ -60,7 +60,8 @@ const TabPage = createBottomTabNavigator(
         height: 49,
       },
       safeAreaInset: {
-        bottom: 'always',
+        //bottom: 'always',
+        bottom: 'never',
         top: 'never',
       },
       showLabel: false,

src/components/TabOptions/TabButton.js

@@ -30,7 +30,7 @@ class TabButton extends Component<Props> {
           color={color}
         />
         <Text
-          style={{ color }}
+          style={{ color, fontSize: 14 }}
           textAlign="center"
         >
           {tabBarTitle}

src/pages/Agera-App-Insure/config/index.js

@@ -10,6 +10,8 @@ export const BANNER = 'banner';
 export const TITLE = 'title';
 export const LIST_ITEM = 'listItem';
 export const CHOOSE = 'choose';
+export const PRODUCT = 'product';
+export const SERVICE = 'service';
 
 const initConfig = {
   insuranceProcess: [
@@ -43,7 +45,8 @@ const initConfig = {
         h1: '', //主标题
         rightIcon: '', //右侧icon
         rightText: '', //右侧文字
-        onPress: () => {}, //点击事件
+        onPress: () => {
+        }, //点击事件
       },
       data: [{ key: '', value: '' }],
     },
@@ -55,14 +58,22 @@ const initConfig = {
         h1: '', //主标题
         rightIcon: '', //右侧icon
         rightText: '', //右侧文字
-        onPress: () => {}, //点击事件
+        onPress: () => {
+        }, //点击事件
       },
       text: '', // 选择框显示标题
       values: [], // 选择框数据集合
       source: {}, //修改源对象
       setKey: '', //修改源对象内的属性名称
-      onChange: () => {}, //选中事件
-      onWillChange: () => {}, // 选中前执行事件
+      onChange: () => {
+      }, //选中事件
+      onWillChange: () => {
+      }, // 选中前执行事件
+    },
+    {
+      type: PRODUCT,
+      key: PRODUCT,
+      uri: '',
     },
   ],
   rules: [

src/pages/Agera-App-Insure/index.js

@@ -4,12 +4,12 @@ import {
   View,
 } from 'react-native';
 import FastImage from 'react-native-fast-image';
+import { ListItem } from 'react-native-elements';
 import Text from '../../components/Text';
 import {
-  BANNER, TITLE, LIST_ITEM, CHOOSE,
+  BANNER, TITLE, LIST_ITEM, CHOOSE, PRODUCT, SERVICE,
 } from './config';
-import BasicIcon from "../../components/BasicIcon";
-import { ListItem } from "react-native-elements";
+import BasicIcon from '../../components/BasicIcon';
 
 function renderBanner(props) {
   console.log('renderBanner:', props);
@@ -37,13 +37,13 @@ function renderTitle(props) {
       <Text style={{
         color: '#333',
         fontSize: 18,
-        marginTop:15,
+        marginTop: 15,
       }}
       >
         {props.h1}
       </Text>
       <Text style={{
-        marginTop:10,
+        marginTop: 10,
         color: '#999',
         fontSize: 13,
       }}
@@ -78,39 +78,61 @@ function renderTitle(props) {
     </View>
   );
 }
-function renderListItem(props) {
 
-  return(
+function f() {
+
+}
+
+function renderItemText(props) {
+  console.log('props:', props);
+  return (
     <View>
-      {
-    <ListItem
-      key={`renderListItem${index}`}
-      containerStyle={{
-        borderBottomWidth: index < props.data.length - 1 ? 0.3 : 0,
-        borderBottomColor: '#ccc',
-      }}
-      title={item.title}
-      titleStyle={{ color: '#666', fontSize: 14 }}
-      leftElement={(
-        <FastImage
-          style={{ width: 24, height: 24 }}
-          source={{
-            uri: item.imgUrl,
-            priority: FastImage.priority.normal,
+      {props.text.map((text, index) => (
+        <ListItem
+          key={`ListItem${index}`}
+          containerStyle={{
+            borderBottomWidth: index < props.text.length - 1 ? 0.3 : 0,
+            borderBottomColor: '#ccc',
           }}
-          resizeMode={FastImage.resizeMode.stretch}
+          title={text.name}
+          titleStyle={{ color: '#666', fontSize: 14 }}
+          leftElement={(
+            <View />
+          )}
+          rightElement={(
+            <Text>{text.value}</Text>
+          )}
         />
-      )}
-      rightElement={(
-        <BasicIcon
-          suite="Ionicons"
-          name="ios-arrow-forward"
-          size={24}
-          color="#666"
-        />
-      )}
-    />}
+      ))
+      }
+    </View>
+  );
+}
+
+function renderListItem(props) {
+  const array = props.data;
+  console.log('array:', array);
+  return (
+    <View>
+      {array.map((item, index) => (
+        renderItemText(item)
+      ))
+      }
     </View>
+  );
+}
+
+function renderImage(props) {
+  console.log('props:',props)
+  return(
+    <FastImage
+      style={{ width: props.width, height: props.width * 1200 / 375 }}
+      source={{
+        uri: props.uri,
+        priority: FastImage.priority.normal,
+      }}
+      resizeMode={FastImage.resizeMode.contain}
+    />
   )
 }
 
@@ -121,9 +143,16 @@ export function renderPageByConfig(config, renderCustomView?) {
     return renderBanner;
   case TITLE:
     return renderTitle;
-    case LIST_ITEM:
+  case LIST_ITEM:
     return renderListItem;
   case CHOOSE:
+    return ()=>{
+
+    }
+    case PRODUCT:
+      return renderImage;
+    case SERVICE:
+      return renderImage;
   default:
     return () => {
       // 有自定义方法执行传入的渲染方法

src/pages/home/HomePage.js

@@ -45,6 +45,15 @@ class HomePage extends Component<Props> {
     this.scrollView = null;
   }
 
+  componentDidMount() : void {
+    this.listener =NativeAppEventEmitter.addListener('react_navigation_onTransitionEnd_call',() => console.log('onTransitionEnd_call'))
+  }
+
+  componentWillUnmount() : void {
+    if(this.listener){
+      this.listener.remove();
+    }
+  }
 
   _onRefresh = () => {
     setTimeout(() => {
@@ -63,17 +72,6 @@ class HomePage 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 (

src/pages/insurePage/ProductDetailPage.js

@@ -15,14 +15,16 @@ import { connect } from 'react-redux';
 import { SpringScrollView } from 'react-native-spring-scrollview';
 import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
 import { pop } from '../../BasicNavigator/actions';
-import NavigationBar from '../../components/NavigationBar';
+import NavigationBar, { NavHeight } from '../../components/NavigationBar';
 import BackButton from '../../components/BackButton';
 import Styles from '../../theme/Styles';
 import decorator from '../../utils/decorator';
+import Text from '../../components/Text'
 import {
-  BANNER, CHOOSE, BaseConfig, LIST_ITEM, TITLE,
+  BANNER, CHOOSE, BaseConfig, LIST_ITEM, TITLE, PRODUCT, SERVICE,
 } from '../Agera-App-Insure/config';
 import { renderPageByConfig } from '../Agera-App-Insure';
+import Button from '../../components/ThemeButton';
 
 type Props = {
   routes: Array,
@@ -69,7 +71,10 @@ class ProductDetailPage extends Component {
   }
 
   translateDataToConfig = (lay, params) => {
-    const { name, description, tagNameList,bannerIconUrl } = params.detail
+    const {
+      name, description, tagNameList, bannerIconUrl, guaranteeContent,
+      productIntroductionUrl, serviceProcessUrl } = params.detail;
+    console.log('guaranteeContent',guaranteeContent)
     switch (lay.type) {
     case BANNER:
       return {
@@ -85,9 +90,28 @@ class ProductDetailPage extends Component {
         labelColor: '#cf4100', //颜色
       };
     case LIST_ITEM:
-      return {};
+      return {
+        title: {
+          icon: '', //左侧icon
+          h1: '', //主标题
+          rightIcon: '', //右侧icon
+          rightText: '', //右侧文字
+          onPress: () => {}, //点击事件
+        },
+        data: JSON.parse(guaranteeContent),
+      };
     case CHOOSE:
       return {};
+      case PRODUCT:
+        return {
+          uri: productIntroductionUrl,
+          width: global.SCREEN_WIDTH,
+        };
+      case SERVICE:
+        return {
+          uri: serviceProcessUrl,
+          width: global.SCREEN_WIDTH,
+        };
     default:
       return {};
     }
@@ -95,21 +119,21 @@ class ProductDetailPage extends Component {
 
   translateDataToRules = (lay, rul, params) => {
     switch (lay.type) {
-      case BANNER:
-        return {};
-      case TITLE:
-        return {};
-      case LIST_ITEM:
-        return {};
-      case CHOOSE:
-        return {};
-      default:
-        return {};
+    case BANNER:
+      return {};
+    case TITLE:
+      return {};
+    case LIST_ITEM:
+      return {};
+    case CHOOSE:
+      return {};
+    default:
+      return {};
     }
   }
 
   render() {
-    const { config } = this.state
+    const { config } = this.state;
     return (
       <View style={Styles.container}>
         <NavigationBar
@@ -117,7 +141,7 @@ class ProductDetailPage extends Component {
           title="太平保险"
         />
         <SpringScrollView
-          ref={(com) => (this.scrollView = com)}
+          ref={com => (this.scrollView = com)}
           styles={Styles.container}
           inverted={false}
           //onRefresh={this._onRefresh}
@@ -129,6 +153,18 @@ class ProductDetailPage extends Component {
           {config.layout.map((lay, index) => (
             renderPageByConfig(lay)(lay)
           ))}
+          <View style={{flexDirection:'row',height:44,alignItems: 'stretch'}}>
+            <View style={{width:global.SCREEN_WIDTH * 150 / 375,justifyContent:'center',alignItems:'center',}}>
+              <Text style={{color:'#666', fontSize: 16}}>
+                金额
+                <Text style={{color:'#FF4656'}}> 125</Text>
+              </Text>
+            </View>
+            <Button
+              title="立即投保"
+              containerStyle={{ width:global.SCREEN_WIDTH * 225 /375 }}
+            />
+          </View>
         </SpringScrollView>
       </View>
 

src/utils/api/localData.js

@@ -83,7 +83,7 @@ export default {
         detailsPageWxshareUrl: '',
         guaranteeContent: '[{"text":[{"name":"航空意外身故、伤残","value":"100万元/份"}]}]',
         bannerIconUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201901/01/340dc870750b41e492ac9ee88b5aae2a.png',
-        productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/12/be5dfbf9afc74ef99fdc39bef66ef292.png',
+        productIntroductionUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/12/3d96dd2f2a6d4e579a53d4ee4bdd73cb.png',
         serviceProcessUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/12/be5dfbf9afc74ef99fdc39bef66ef292.png',
         importantNotificationUrl: 'https://ecustomer.tp95589.com/static/insurance_img/201906/12/438000682508403caf62a15878c9416d.png',
         tagNameList: [