Skip to content

B
BasicApp
Commit e725e587 authored by shiyunjie's avatar shiyunjie
Browse files
Options

保险产品示例

parent 29881cab
Hide whitespace changes
Inline Side-by-side
Showing with 80 additions and 113 deletions
package.json
View file @ e725e587
...@@ -31,7 +31,6 @@ ...@@ -31,7 +31,6 @@
"react-native-svg": "^9.5.1", "react-native-svg": "^9.5.1",
"react-native-swiper": "^1.5.14", "react-native-swiper": "^1.5.14",
"react-native-tab-view": "^2.7.1", "react-native-tab-view": "^2.7.1",
"react-native-update-mutlirn-hg": "^3.1.1",
"react-native-vector-icons": "^6.4.2", "react-native-vector-icons": "^6.4.2",
"react-navigation": "^3.11.0", "react-navigation": "^3.11.0",
"react-navigation-redux-helpers": "^3.0.2", "react-navigation-redux-helpers": "^3.0.2",
......
src/pages/home/PolicyPage.js
View file @ e725e587
...@@ -11,28 +11,22 @@ import { connect } from 'react-redux'; ...@@ -11,28 +11,22 @@ import { connect } from 'react-redux';
import { compose } from 'redux'; import { compose } from 'redux';
import { import {
StyleSheet, StyleSheet,
TouchableOpacity,
View, View,
} from 'react-native'; } from 'react-native';
import FastImage from 'react-native-fast-image'; import { TabBar, TabView } from 'react-native-tab-view';
import { TabBar, TabView, SceneMap } from 'react-native-tab-view';
import { LargeList } from 'react-native-largelist-v3';
import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader'; import { CommonLottieHeader } from 'react-native-spring-scrollview/Customize/CommonLottieHeader';
import { SpringScrollView } from 'react-native-spring-scrollview';
import { push } from '../../BasicNavigator/actions'; import { push } from '../../BasicNavigator/actions';
import decorator from '../../utils/decorator'; import decorator from '../../utils/decorator';
import { queryInsuranceProductsAPI } from '../InsuranceList/InsuranceAPI';
import TabBarIndicatorLinear from '../../components/TabBarIndicator'; import TabBarIndicatorLinear from '../../components/TabBarIndicator';
import PolicyList from './PolicyList'; import PolicyList from './PolicyList';
import { import {
renderPolicyHeader, renderPolicyHeader,
renderPolicyTab, renderPolicyTab,
headerHeight,
tabHeight,
} from './policyRenderUtil'; } from './policyRenderUtil';
import Styles from "../../theme/Styles"; import Styles from '../../theme/Styles';
import { SpringScrollView } from "react-native-spring-scrollview"; import NavigationBar from '../../components/NavigationBar';
import NavigationBar from "../../components/NavigationBar";
type Props = {}; type Props = {};
const tabWidth = global.SCREEN_WIDTH / 4; const tabWidth = global.SCREEN_WIDTH / 4;
...@@ -65,22 +59,24 @@ const typeData = { ...@@ -65,22 +59,24 @@ const typeData = {
routes: typeArr, routes: typeArr,
}; };
const PolicyListView = () => (<PolicyList style={{flex:1}} />);
@decorator @decorator
class PolicyPage extends Component<Props> { class PolicyPage extends Component<Props> {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
data: [],
type: typeData, type: typeData,
}; };
} }
onRefresh = () => {
setTimeout(() => {
this.policyScrollView.endRefresh();
}, 3000);
};
_handleIndexChange = (index) => { _handleIndexChange = (index) => {
console.log('_handleIndexChange:',index) console.log('_handleIndexChange:', index);
const type = { const type = {
index, index,
routes: typeArr, routes: typeArr,
...@@ -88,28 +84,6 @@ class PolicyPage extends Component<Props> { ...@@ -88,28 +84,6 @@ class PolicyPage extends Component<Props> {
this.setState({ type }); 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 => ( _renderTabBar = item => (
<TabBar <TabBar
{...item} {...item}
...@@ -125,48 +99,44 @@ class PolicyPage extends Component<Props> { ...@@ -125,48 +99,44 @@ class PolicyPage extends Component<Props> {
)} )}
/> />
) )
_onRefresh = () => {
//await this.queryList();
this.scrollView.endRefresh();
};
render() { render() {
return ( return (
<View style={[styles.container, { backgroundColor: '#fff' }]}> <View style={[styles.container, { backgroundColor: '#fff' }]}>
<NavigationBar <NavigationBar
style={{zIndex:4,backgroundColor: '#fff'}} style={{ zIndex: 4, backgroundColor: '#fff' }}
textStyle={{color:'#333'}} textStyle={{ color: '#333' }}
title="保险" title="保险"
/> />
<SpringScrollView <SpringScrollView
ref={(com) => { ref={(com) => {
this.scrollView = com; this.policyScrollView = com;
}} }}
onScroll={({ nativeEvent: { contentOffset: { x, y } } }) => { onScroll={({ nativeEvent: { contentOffset: { x, y } } }) => {
//console.log('offset : x=', x, 'y=', y); //console.log('offset : x=', x, 'y=', y);
}} }}
styles={Styles.container} styles={Styles.container}
inverted={false} inverted={false}
onRefresh={this._onRefresh} onRefresh={this.onRefresh}
//onLoading={this._onLoading} //onLoading={this._onLoading}
// allLoaded={this.state.allLoaded} // allLoaded={this.state.allLoaded}
refreshHeader={CommonLottieHeader} refreshHeader={CommonLottieHeader}
> >
{renderPolicyHeader(this.props)} {renderPolicyHeader(this.props)}
{renderPolicyTab(this.props)} {renderPolicyTab(this.props)}
<View style={{ height: 43 }} /> <View style={{ height: 43 }} />
<TabView <TabView
navigationState={this.state.type} navigationState={this.state.type}
renderScene={()=>null} renderScene={() => null}
renderTabBar={this._renderTabBar} renderTabBar={this._renderTabBar}
onIndexChange={this._handleIndexChange} onIndexChange={this._handleIndexChange}
keyboardDismissMode="none" keyboardDismissMode="none"
lazy lazy
swipeEnabled={false} swipeEnabled={false}
swipeDistanceThreshold={global.SCREEN_WIDTH / 10} swipeDistanceThreshold={global.SCREEN_WIDTH / 10}
initialLayout={{ width: global.SCREEN_WIDTH }} initialLayout={{ width: global.SCREEN_WIDTH }}
/> />
<PolicyList style={{flex:1}} /> <PolicyList style={{ flex: 1 }} />
</SpringScrollView> </SpringScrollView>
</View> </View>
); );
......
src/pages/home/homeRenderUtil.js
View file @ e725e587
...@@ -175,7 +175,7 @@ export function activityItem(item) { ...@@ -175,7 +175,7 @@ export function activityItem(item) {
marginVertical: 8, marginVertical: 8,
color: item.detailColor, color: item.detailColor,
}} }}
numberOfLines={2} numberOfLines={1}
> >
{item.detail} {item.detail}
</Text> </Text>
......
src/pages/home/policyRenderUtil.js
View file @ e725e587
...@@ -22,38 +22,36 @@ export function renderPolicyHeader(props) { ...@@ -22,38 +22,36 @@ export function renderPolicyHeader(props) {
colors={['#08BFF9', '#4A98E0']} colors={['#08BFF9', '#4A98E0']}
style={[{ style={[{
height: headerHeight - tabHeight, height: headerHeight - tabHeight,
justifyContent: 'flex-end',
}]} }]}
> >
<View> <View
<View style={{
style={{ height: 25,
height: 25, flexDirection: 'row',
flexDirection: 'row', marginBottom: 62,
marginTop: 8, paddingLeft: 15,
paddingLeft: 15, }}
}} >
<Text style={{
color: '#fff',
fontSize: 18,
}}
> >
<Text style={{ 太平保险
</Text >
<Text
style={{
color: '#fff', color: '#fff',
fontSize: 18, fontSize: 12,
marginTop: 6,
marginLeft: 2,
}} }}
> >
太平保险 为您精选
</Text> </Text >
<Text </View >
style={{ </LinearGradient >
color: '#fff',
fontSize: 12,
marginTop: 6,
marginLeft: 2,
}}
>
为您精选
</Text>
</View>
</View>
</LinearGradient>
); );
} }
...@@ -87,30 +85,30 @@ export function renderPolicyTab(props) { ...@@ -87,30 +85,30 @@ export function renderPolicyTab(props) {
}} }}
onPress={() => props.pushTo('InsuranceList')} onPress={() => props.pushTo('InsuranceList')}
> >
<View style={{ <View style={{
flex: 1, flex: 1,
height: tabHeight * 2, height: tabHeight * 2,
flexDirection: 'row', flexDirection: 'row',
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center', alignItems: 'center',
}} }}
> >
<FastImage <FastImage
style={{ style={{
width: 36, width: 36,
height: 36, height: 36,
}} }}
source={{ source={{
uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`, uri: `${resourceURLMapping[ENV]}insure_wodebaodan.png`,
priority: FastImage.priority.normal, priority: FastImage.priority.normal,
}} }}
resizeMode={FastImage.resizeMode.stretch} resizeMode={FastImage.resizeMode.stretch}
/> />
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的保单</Text> <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的保单</Text >
</View> </View >
</TouchableOpacity> </TouchableOpacity >
<View style={{ backgroundColor: '#ccc', height: tabHeight, width: 1 }} /> <View style={{ backgroundColor: '#ccc', height: tabHeight, width: 1 }} />
<View style={{ <View style={{
flex: 1, flex: 1,
...@@ -131,9 +129,9 @@ export function renderPolicyTab(props) { ...@@ -131,9 +129,9 @@ export function renderPolicyTab(props) {
}} }}
resizeMode={FastImage.resizeMode.stretch} resizeMode={FastImage.resizeMode.stretch}
/> />
<Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }}>我的订单</Text> <Text style={{ color: '#333', fontSize: 16, marginLeft: 10 }} >我的订单</Text >
</View> </View >
</View> </View >
); );
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment