IndexBanner.js
2.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
/**
* Created by mac on 2017/11/28.
*/
import React, {Component} from "react";
import {Image, StyleSheet, Text, TouchableOpacity, View,TouchableWithoutFeedback} from "react-native";
import {height, width} from "../../utils/getSize";
import Carousel from "react-native-looped-carousel";
const defaultBanner = require('../../img/banner.png')
export default class IndexBanner extends Component {
constructor() {
super();
}
// 渲染顶部跑马灯
render() {
if (this.props.data.length === 0) {
return (
<View />
);
}
return (
<View>
<Carousel
style={styles.carousel}
activeDotColor="white"
autoplay
bullets
delay={5000}
bulletsContainerStyle={styles.bulletsContainer}
bulletStyle={styles.bullet}
chosenBulletStyle={styles.chosenBullet}
>
{
this.props.data.map((v, i) =>
<TouchableOpacity activeOpacity={1} onPress={() => toPage(this.props.navigation, v)} key={i}>
<Image
style={styles.carousel} resizeMode="stretch"
defaultSource={defaultBanner}
source={v.pictureUrl}
/>
</TouchableOpacity>,
)
}
</Carousel>
</View>
);
}
}
// 跳转至某页面，类型+ID
export function toPage(navigation, v) {
if (v.type == '2') {
navigation.navigate('ChooseActivityAttribute', { name: 'ChooseActivityAttribute', title: '平安地铁先锋行', defultValue: global.user.partyName ? global.user.partyName : '' });
} else if (v.type == '3') {
navigation.navigate('chooseVolunteerActivity', { name: 'chooseVolunteerActivity', title: '上海市平安志愿者', defultValue: global.user.volunteerName ? global.user.volunteerName : '' });
}
}
const styles = StyleSheet.create({
carousel: {
width,
height: width * 0.4,
},
bulletsContainer: {
position: 'absolute',
top: 18,
},
bullet: {
height: 6,
width: 6,
margin: 3,
borderRadius: 3,
borderWidth: 0,
backgroundColor: '#999',
},
chosenBullet: {
height: 6,
width: 6,
margin: 3,
borderRadius: 3,
borderWidth: 0,
backgroundColor: 'white',
},
titleContainer: {
position: 'absolute',
bottom: 0,
left: 0,
right: 0,
height: 30,
paddingTop: 6,
paddingRight: 10,
paddingLeft: 10,
backgroundColor: 'rgba(0,0,0,0.3)',
},
title: {
color: '#ffffff',
fontSize: 12,
},
});