React-Native之轮播组件looped-carousel的介绍与使用

React-Native之轮播组件looped-carousel的介绍与使用

一,关于react-native轮播组件的介绍与对比

二,react-native-looped-carousel的介绍

1,安装:

2,属性

contentContainerStyle

当前页面下标 / 页面个数

当前页面下标

页面个数

三,react-native-looped-carousel的使用实例

1,官网使用实例：

1 import React, { Component } from 'react';
2 import {
3   Text,
4   View,
5   Dimensions,
6 } from 'react-native';
7 import Carousel from 'react-native-looped-carousel';
8
9 const { width, height } = Dimensions.get('window');
10
11 export default class CarouselExample extends Component {
12
13   constructor(props) {
14     super(props);
15
16     this.state = {
17       size: { width, height },
18     };
19   }
20
21   _onLayoutDidChange = (e) => {
22     const layout = e.nativeEvent.layout;
23     this.setState({ size: { width: layout.width, height: layout.height } });
24   }
25
26   render() {
27     return (
28       <View style={{ flex: 1 }} onLayout={this._onLayoutDidChange}>
29         <Carousel
30           delay={2000}
31           style={this.state.size}
32           autoplay
33           pageInfo
34           onAnimateNextPage={(p) => console.log(p)}
35         >
36           <View style={[{ backgroundColor: '#BADA55' }, this.state.size]}><Text>1</Text></View>
37           <View style={[{ backgroundColor: 'red' }, this.state.size]}><Text>2</Text></View>
38           <View style={[{ backgroundColor: 'blue' }, this.state.size]}><Text>3</Text></View>
39         </Carousel>
40       </View>
41     );
42   }
43 }

2,我的使用实例：

1  <Carousel
2                 delay={4000}   //自动切换的延迟 （毫秒）
3                 style={{ height: Boxheight, width: AppSetting.ScreenWidth, backgroundColor: AppSetting.BLACK }}          //样式
4                 autoplay    //自动轮播
5                 pageInfo={false}    //在底部显示当前页面下标 / 页面个数
6                 swiper      //允许手势滑动
7                 bullets={true}  //显示小圆点
8                 bulletStyle={{           //未选中的圆点样式
9                     backgroundColor: 'rgba(255,255,255,0.4)',
10                     width: 12,
11                     height: 12,
12                     borderRadius: 50,
13                     borderColor:'rgba(255,255,255,0.4)',
14                     // marginLeft: 10,
15                     // marginRight: 9,
16                     // marginTop: 6,
17                     // marginBottom: 9,
18                     margin:6
19                 }} //未选中时小圆点的样式
20                 chosenBulletStyle={{    //选中的圆点样式
21                     backgroundColor: AppSetting.MAIN_COLOR,
22                     width: 16,
23                     height: 16,
24                     borderRadius: 50,
25                     // marginLeft: 10,
26                     // marginRight: 9,
27                     // marginTop: 9,
28                     // marginBottom: 9,
29                     margin:6
30                 }}//选中时小圆点的样式
31             >
32                 {React.Children.map(self.state.dataImageSource, (child, index) => {
33                     return (
34                         <View>
35                             <TouchableOpacity
36                                 // key={index}
37                                 style={styles.img}
38                                 activeOpacity={1}
39                                 //onPress={() => { Actions.AnnouncementDetails({ model: child }) }}
40                                  onPress={() => { this.openAnnouncementData(child) }}
41                             >
42                                 <Image
43                                     source={{ uri: child }}
44                                     style={styles.img}
45                                     resizeMode='stretch' />
46                             </TouchableOpacity>
47                         </View>
48                     )
49                 })}
50
51             </Carousel>

1 self.setState({
2             announcementData: [
3                 {
4                     id: 1,
5                     title: 'React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)',
6                     imageurl: 'http://www.baidu.com/images/banner1.png',
7                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9524842.html'
8                 },
9                 {
10                     id: 3,
11                     title: 'React Native之FlatList的介绍与使用实例',
12                     imageurl: 'http://www.baidu.com/images/banner2.png',
13                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9523927.html'
14                 },
15                 {
16                     id: 4,
17                     title: '将数字转换成千分位表示',
18                     imageurl: 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
19                     url: 'https://www.cnblogs.com/jackson-zhangjiang/p/9454362.html'
20                 },
21
22             ],
23  dataImageSource: [
24                 'http://www.baidu.com/images/banner1.png',
25                 'http://www.baidu.com/baidufiles/banner/images/2018/08/07/QQ%E5%9B%BE%E7%89%8720180807164315.jpg',
26                 'http://www.baidu.com/images/banner2.png',
27                 'http://pic.58pic.com/58pic/10/97/02/30a58PICH7N.jpg',
28             ],
29             isStartRendering:true
30    })

1  {this.state.isStartRendering?this.SowingMap():null}