保险产品示例

package.json

@@ -31,7 +31,6 @@
     "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",
     "react-navigation-redux-helpers": "^3.0.2",

src/pages/home/PolicyPage.js

@@ -11,28 +11,22 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import {
   StyleSheet,
-  TouchableOpacity,
   View,
 } from 'react-native';
 
-import FastImage from 'react-native-fast-image';
-import { TabBar, TabView, SceneMap } from 'react-native-tab-view';
-import { LargeList } from 'react-native-largelist-v3';
+import { TabBar, TabView } from 'react-native-tab-view';
 import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
+import { SpringScrollView } from 'react-native-spring-scrollview';
 import { push } from '../../BasicNavigator/actions';
 import decorator from '../../utils/decorator';
-import { queryInsuranceProductsAPI } from '../InsuranceList/InsuranceAPI';
 import TabBarIndicatorLinear from '../../components/TabBarIndicator';
 import PolicyList from './PolicyList';
 import {
   renderPolicyHeader,
   renderPolicyTab,
-  headerHeight,
-  tabHeight,
 } from './policyRenderUtil';
-import Styles from "../../theme/Styles";
-import { SpringScrollView } from "react-native-spring-scrollview";
-import NavigationBar from "../../components/NavigationBar";
+import Styles from '../../theme/Styles';
+import NavigationBar from '../../components/NavigationBar';
 
 type Props = {};
 const tabWidth = global.SCREEN_WIDTH / 4;
@@ -65,22 +59,24 @@ const typeData = {
   routes: typeArr,
 };
 
-const PolicyListView = () => (<PolicyList style={{flex:1}} />);
-
 
 @decorator
 class PolicyPage extends Component<Props> {
   constructor(props) {
     super(props);
     this.state = {
-      data: [],
       type: typeData,
     };
   }
 
+  onRefresh = () => {
+    setTimeout(() => {
+      this.policyScrollView.endRefresh();
+    }, 3000);
+  };
 
   _handleIndexChange = (index) => {
-    console.log('_handleIndexChange:',index)
+    console.log('_handleIndexChange:', index);
     const type = {
       index,
       routes: typeArr,
@@ -88,28 +84,6 @@ class PolicyPage extends Component<Props> {
     this.setState({ type });
   };
 
-
-  //queryList = async () => {
-  //  const list = await queryInsuranceProductsAPI({});
-  //  console.log('queryInsuranceProductsAPI:', list);
-  //  if (list) {
-  //    this.setState({
-  //      data: [
-  //        {
-  //          items: list,
-  //        },
-  //      ],
-  //    });
-  //  }
-  //};
-
-
-  //_renderScene = () => {
-  //  console.log('_renderScene:');
-  //  return (
-  //  );
-  //};
-
   _renderTabBar = item => (
     <TabBar
       {...item}
@@ -125,48 +99,44 @@ class PolicyPage extends Component<Props> {
       )}
     />
   )
-  _onRefresh = () => {
-    //await this.queryList();
-    this.scrollView.endRefresh();
-  };
 
   render() {
     return (
       <View style={[styles.container, { backgroundColor: '#fff' }]}>
         <NavigationBar
-          style={{zIndex:4,backgroundColor: '#fff'}}
-          textStyle={{color:'#333'}}
+          style={{ zIndex: 4, backgroundColor: '#fff' }}
+          textStyle={{ color: '#333' }}
           title="保险"
         />
         <SpringScrollView
           ref={(com) => {
-            this.scrollView = com;
+            this.policyScrollView = com;
           }}
           onScroll={({ nativeEvent: { contentOffset: { x, y } } }) => {
             //console.log('offset : x=', x, 'y=', y);
           }}
           styles={Styles.container}
           inverted={false}
-          onRefresh={this._onRefresh}
+          onRefresh={this.onRefresh}
           //onLoading={this._onLoading}
           // allLoaded={this.state.allLoaded}
           refreshHeader={CommonLottieHeader}
         >
-        {renderPolicyHeader(this.props)}
-        {renderPolicyTab(this.props)}
-        <View style={{ height: 43 }} />
-        <TabView
-          navigationState={this.state.type}
-          renderScene={()=>null}
-          renderTabBar={this._renderTabBar}
-          onIndexChange={this._handleIndexChange}
-          keyboardDismissMode="none"
-          lazy
-          swipeEnabled={false}
-          swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
-          initialLayout={{ width: global.SCREEN_WIDTH }}
-        />
-          <PolicyList style={{flex:1}} />
+          {renderPolicyHeader(this.props)}
+          {renderPolicyTab(this.props)}
+          <View style={{ height: 43 }} />
+          <TabView
+            navigationState={this.state.type}
+            renderScene={() => null}
+            renderTabBar={this._renderTabBar}
+            onIndexChange={this._handleIndexChange}
+            keyboardDismissMode="none"
+            lazy
+            swipeEnabled={false}
+            swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
+            initialLayout={{ width: global.SCREEN_WIDTH }}
+          />
+          <PolicyList style={{ flex: 1 }} />
         </SpringScrollView>
       </View>
     );

src/pages/home/homeRenderUtil.js

@@ -175,7 +175,7 @@ export function activityItem(item) {
           marginVertical: 8,
           color: item.detailColor,
         }}
-        numberOfLines={2}
+        numberOfLines={1}
       >
         {item.detail}
       </Text>

src/pages/home/policyRenderUtil.js

@@ -22,38 +22,36 @@ export function renderPolicyHeader(props) {
       colors={['#08BFF9', '#4A98E0']}
       style={[{
         height: headerHeight - tabHeight,
+        justifyContent: 'flex-end',
       }]}
     >
-      <View>
-        <View
-          style={{
-            height: 25,
-            flexDirection: 'row',
-            marginTop: 8,
-            paddingLeft: 15,
-          }}
+      <View
+        style={{
+          height: 25,
+          flexDirection: 'row',
+          marginBottom: 62,
+          paddingLeft: 15,
+        }}
+      >
+        <Text style={{
+          color: '#fff',
+          fontSize: 18,
+        }}
         >
-          <Text style={{
+          太平保险
+        </Text >
+        <Text
+          style={{
             color: '#fff',
-            fontSize: 18,
+            fontSize: 12,
+            marginTop: 6,
+            marginLeft: 2,
           }}
-          >
-            太平保险
-          </Text>
-          <Text
-            style={{
-              color: '#fff',
-              fontSize: 12,
-              marginTop: 6,
-              marginLeft: 2,
-            }}
-          >
-            为您精选
-          </Text>
-        </View>
-
-      </View>
-    </LinearGradient>
+        >
+          为您精选
+        </Text >
+      </View >
+    </LinearGradient >
   );
 }
 
@@ -87,30 +85,30 @@ export function renderPolicyTab(props) {
         }}
         onPress={() => props.pushTo('InsuranceList')}
       >
-      <View style={{
-        flex: 1,
-        height: tabHeight * 2,
-        flexDirection: 'row',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-      >
-        <FastImage
-          style={{
-            width: 36,
-            height: 36,
+        <View style={{
+          flex: 1,
+          height: tabHeight * 2,
+          flexDirection: 'row',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+        >
+          <FastImage
+            style={{
+              width: 36,
+              height: 36,
 
-          }}
-          source={{
-            uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
-            priority: FastImage.priority.normal,
-          }}
-          resizeMode={FastImage.resizeMode.stretch}
-        />
-        <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的保单</Text>
+            }}
+            source={{
+              uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
+              priority: FastImage.priority.normal,
+            }}
+            resizeMode={FastImage.resizeMode.stretch}
+          />
+          <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的保单</Text >
 
-      </View>
-      </TouchableOpacity>
+        </View >
+      </TouchableOpacity >
       <View style={{ backgroundColor: '#ccc', height: tabHeight, width: 1 }} />
       <View style={{
         flex: 1,
@@ -131,9 +129,9 @@ export function renderPolicyTab(props) {
           }}
           resizeMode={FastImage.resizeMode.stretch}
         />
-        <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的订单</Text>
-      </View>
-    </View>
+        <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的订单</Text >
+      </View >
+    </View >
   );
 }