保险产品示例

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,29 +99,25 @@ 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}
@@ -157,7 +127,7 @@ class PolicyPage extends Component<Props> {
           <View style={{ height: 43 }} />
           <TabView
             navigationState={this.state.type}
-          renderScene={()=>null}
+            renderScene={() => null}
             renderTabBar={this._renderTabBar}
             onIndexChange={this._handleIndexChange}
             keyboardDismissMode="none"
@@ -166,7 +136,7 @@ class PolicyPage extends Component<Props> {
             swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
             initialLayout={{ width: global.SCREEN_WIDTH }}
           />
-          <PolicyList style={{flex:1}} />
+          <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,14 +22,14 @@ export function renderPolicyHeader(props) {
       colors={['#08BFF9', '#4A98E0']}
       style={[{
         height: headerHeight - tabHeight,
+        justifyContent: 'flex-end',
       }]}
     >
-      <View>
       <View
         style={{
           height: 25,
           flexDirection: 'row',
-            marginTop: 8,
+          marginBottom: 62,
           paddingLeft: 15,
         }}
       >
@@ -39,7 +39,7 @@ export function renderPolicyHeader(props) {
         }}
         >
           太平保险
-          </Text>
+        </Text >
         <Text
           style={{
             color: '#fff',
@@ -49,11 +49,9 @@ export function renderPolicyHeader(props) {
           }}
         >
           为您精选
-          </Text>
-        </View>
-
-      </View>
-    </LinearGradient>
+        </Text >
+      </View >
+    </LinearGradient >
   );
 }
 
@@ -107,10 +105,10 @@ export function renderPolicyTab(props) {
             }}
             resizeMode={FastImage.resizeMode.stretch}
           />
-        <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的保单</Text>
+          <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 >
   );
 }