来到首页，我们希望展现一个图片轮播器，react-native伟大的贡献者们，提供了一些很好的组件，在这里我们介绍react-native-viewpager。
首先安装它：
|
1 |
npm install react-native-viewpager --save |
详见：https://github.com/race604/react-native-viewpager
下面我们先上全部代码，再一一介绍：
|
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 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
import React, { Component } from 'react'; import { StyleSheet, Text, View, Image, //轮播图片加 Dimensions, //end 轮播图片加 } from 'react-native'; //轮播图片加 import ViewPager from 'react-native-viewpager'; var deviceWidth = Dimensions.get('window').width; //计算设备宽度 //end 轮播图片加 import { StackNavigator, } from 'react-navigation'; import { ItemScreen } from './ItemScreen'; //轮播图片加 const BANNER_IMGS = [ 'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg', 'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg', 'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg', 'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg', 'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg', ]; //end 轮播图片加 class HomeScreen extends Component { //轮播图片加 constructor(props) { super(props); // 用于构建DataSource对象 var dataSource = new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2, }); // 实际的DataSources存放在state中 this.state = { dataSource: dataSource.cloneWithPages(BANNER_IMGS) } } //ViewPager播放的内部图片 _renderPage(data, pageID) { return ( <Image source={{ uri: data }} style={styles.page} /> ); } //end 轮播图片加 static navigationOptions = { title: '首页', }; /** dataSource: 提供页面数据, renderPage: 用于渲染页面视图, autoPlay: 为true 将自动播放, isLoop: 为true支持循环播放, locked: 为true禁止触摸滚动, onChangePage: 页面变化的回调, renderPageIndicator: 渲染自定义的 ViewPager indicator. */ render() { const { navigate } = this.props.navigation; return ( <View style={styles.container} > <View style={styles.swiper}> <ViewPager style={this.props.style} //样式 dataSource={this.state.dataSource} renderPage={this._renderPage} isLoop={true} autoPlay={true} /> </View> <View style={styles.swipertitle}> <Text onPress={() => navigate('item')} >首页</Text> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', flexDirection: 'column', backgroundColor: '#F6F6F6', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, //轮播图片加 swiper: { flexDirection: 'row', height: 200, }, page: { width: deviceWidth, height: 200, }, //end 轮播图片加 }); const HomeApp = StackNavigator({ home: { screen: HomeScreen }, item: { screen: ItemScreen }, }); export default HomeApp; |
很多地方已经加了注释，全部的关于图片轮播器的图片内容，也加了“轮播图片加”到“end 轮播图片加” 包裹起来。
第一步，导入组件，并计算设备宽度
|
1 2 3 4 |
//轮播图片加 import ViewPager from 'react-native-viewpager'; var deviceWidth = Dimensions.get('window').width; //计算设备宽度 //end 轮播图片加 |
别忘了
|
1 2 3 4 5 6 7 |
import { ....... Image, //轮播图片加 Dimensions, //end 轮播图片加 } from 'react-native'; |
第二步，将你要使用的图片放到数组里。
|
1 2 3 4 5 6 7 8 9 |
//轮播图片加 const BANNER_IMGS = [ 'http://ac-c6scxa78.clouddn.com/f6b64dc4bf7bee56.jpg', 'http://ac-c6scxa78.clouddn.com/91ead58b0bb213b6.jpg', 'http://ac-c6scxa78.clouddn.com/d67316858f6c71f3.jpg', 'http://ac-c6scxa78.clouddn.com/c81c5b7be1838a1e.jpg', 'http://ac-c6scxa78.clouddn.com/54fe022399902788.jpg', ]; //end 轮播图片加 |
第三步，构建数据源
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
//轮播图片加 constructor(props) { super(props); // 用于构建DataSource对象 var dataSource = new ViewPager.DataSource({ pageHasChanged: (p1, p2) => p1 !== p2, }); // 实际的DataSources存放在state中 this.state = { dataSource: dataSource.cloneWithPages(BANNER_IMGS) } } ...... //end 轮播图片加 |
第四步，构建内部渲染的内容
|
1 2 3 4 5 6 7 8 |
//ViewPager播放的内部图片 _renderPage(data, pageID) { return ( <Image source={{ uri: data }} style={styles.page} /> ); } |
第五步，渲染这个组件
|
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 |
/** dataSource: 提供页面数据, renderPage: 用于渲染页面视图, autoPlay: 为true 将自动播放, isLoop: 为true支持循环播放, locked: 为true禁止触摸滚动, onChangePage: 页面变化的回调, renderPageIndicator: 渲染自定义的 ViewPager indicator. */ render() { const { navigate } = this.props.navigation; return ( <View style={styles.container} > <View style={styles.swiper}> <ViewPager style={this.props.style} //样式 dataSource={this.state.dataSource} renderPage={this._renderPage} isLoop={true} autoPlay={true} /> </View> <View style={styles.swipertitle}> <Text onPress={() => navigate('item')} >首页</Text> </View> </View> ); } } |
第六步，添加样式
|
1 2 3 4 5 6 7 8 9 10 |
//轮播图片加 swiper: { flexDirection: 'row', height: 200, }, page: { width: deviceWidth, height: 200, }, //end 轮播图片加 |
