React-Native之ViewPagerAndroid的使用
刚接触React－Native不久，我就被深深折服了。
前几天做项目用到了ViewPager做广告页，在研究了一番官方文档之后，终于也是大体做出来了，今天就分享给大家吧。
其实，大家如果使用过Android的ViewPager，那么你可能会很容易的去理解这个组件了。
下面是实现的代码（涉及到ViewPager实现的我会标出）：
1 use strict';
2
3 var React = require('react-native');
4 var FirstPage = require('./firstPage');
5 var SecondPage = require('./secondPage');
6 var ThirdPage = require('./thirdPage');
7 var ForthPage = require('./forthPage');
8 var FifthPage = require('./fifthPage');
9 var NavBar = require('rn-navbar');
10
11
12 var Dimensions = require('Dimensions');
13
14 var {
15 Image,
16 StyleSheet,
17 Text,
18 TouchableWithoutFeedback,
19 TouchableOpacity,
20 View,
21 ViewPagerAndroid,
22 Navigator,
23 TouchableOpacity,
24 } = React;
25
26 var PAGES = 5;
27 var BGCOLOR = ['#fdc08e', '#fff6b9', '#99d1b7', '#dde5fe'];//
28 var deviceWidth = Dimensions.get('window').width;
29 var deviceHeight = Dimensions.get('window').height;
30
31 var ViewPagerAndroidExample = React.createClass({
32 getInitialState: function() {//初始化viewpager
33 return {
34 page: 0,
35 animationsAreEnabled: true,
36 progress: {
37 position: 0,
38 offset: 0,
39 },
40 };
41 },
42 onPageSelected: function(e) {//当页面选中的时候
43 this.setState({page: e.nativeEvent.position});
44 },
45 //滑动
46 onPageScroll: function(e) {
47 this.setState({progress: e.nativeEvent});
48 },
49 //移动到某一页
50 move: function(delta) {
51 var page = this.state.page + delta;
52 this.go(page);
53 },
54 //跳到某一页
55 go: function(page) {
56 if (this.state.animationsAreEnabled) {
57 this.viewPager.setPage(page);
58 } else {
59 this.viewPager.setPageWithoutAnimation(page);
60 }
61 this.setState({page});
62 },
63 //根据页数加载界面
64 render: function() {
65 var pages = [];
66 for (var i = 0; i < PAGES; i++) {
67 var pageStyle = {
68 backgroundColor: BGCOLOR[i % BGCOLOR.length],
69 alignItems: 'center',
70 justifyContent : 'center',
71 };
72 if(i === 0){
73 pages.push(
74 <View key={i} style={pageStyle} collapsable={false}>
75 <FirstPage />
76 </View>
77 );
78 }else if(i === 1){
79 pages.push(
80 <View key={i} style={pageStyle} collapsable={false}>
81 <SecondPage />
82 </View>
83 );
84 }
85 else if(i === 2){
86 pages.push(
87 <View key={i} style={pageStyle} collapsable={false}>
88 <ThirdPage />
89 </View>
90 );
91 }else if(i === 3){
92 pages.push(
93 <View key={i} style={pageStyle} collapsable={false}>
94 <ForthPage />
95 </View>
96 );
97 }else if(i === 4){
98 pages.push(
99 <View key={i} style={pageStyle} collapsable={false}>
100 <FifthPage />
101 </View>
102 );
103 }
104 else{
105 pages.push(
106 <View key={i} style={pageStyle} collapsable={false}>
107 </View>
108 );
109 }
110 }
111 var { page, animationsAreEnabled } = this.state;
112
113
114 return (
115 <View style={styles.container} >
116 <NavBar
117 navigator={this.props.navigator}
118 title="关于"
119 renderScene={this.renderScene}
120 backFunc={()=>{this.props.navigator.pop()}}/>
121 <View style = { styles.vpContainer }>
122 <ViewPagerAndroid
123 style={styles.viewPager}
124 initialPage={0}
125 onPageScroll={this.onPageScroll}
126 onPageSelected={this.onPageSelected}
127 ref={viewPager => { this.viewPager = viewPager; }}>
128 {pages}
129 </ViewPagerAndroid>
130 </View>
131 <View style = { [styles.dotView1,{ opacity : page == 0 ? 1 : 0.4 }] } />
132 <View style = { [styles.dotView2 , { opacity : page == 1 ? 1 : 0.4 }] }/>
133 <View style = { [styles.dotView3, { opacity : page == 2 ? 1 : 0.4 }] } />
134 <View style = { [styles.dotView4, { opacity : page == 3 ? 1 : 0.4 }] } />
135 <View style = { [styles.dotView5, { opacity : page == 4 ? 1 : 0.4 }] } />
136 </View>
137 );
138 },
139 });
140
141
142 var NavigationBarRouteMapper = {
143 LeftButton(route, navigator, index, nextState) {
144 return (
145 <TouchableOpacity style={{flex:1}}
146 onPress={() => navigator.parentNavigator.pop()}>
147 <View style = {styles.titleBackView} >
148 <Image source = {require('../imgs/icon_back.png')} style = { styles.titleBackimg }/>
149 <Text style={ styles.titleBackText }>
150 返回
151 </Text>
152 </View>
153 </TouchableOpacity>
154 );
155 },
156 RightButton(route, navigator, index, nextState) {
157 return (
158 <View/>
159 );
160 },
161 Title(route, navigator, index, nextState) {
162 return (
163 <View style = { styles.titleCenterView } >
164 <Text style={ styles.titleCenterText } >
165 关于
166 </Text>
167 </View>
168 );
169 }
170 };
171
172 //dotview小圆点，用于表示滑动到哪一页圆点
173 var styles = StyleSheet.create({
174 container: {
175 flex: 1,
176 backgroundColor: 'white',
177 },
178 vpContainer: {
179 flex: 9,
180 },
181 viewPager: {
182 flex: 1,
183 },
184 dotView1: {
185 position : 'absolute' ,
186 width : deviceWidth/30 ,
187 height : deviceWidth/30,
188 borderRadius: deviceWidth/60,
189 top : deviceHeight-deviceHeight/8,
190 right : deviceWidth / 2 + 2*deviceWidth/15 ,
191 backgroundColor : 'gray' ,
192 opacity : 0.4 ,
193 flexDirection : 'column',
194 },
195 dotView2: {
196 position : 'absolute' ,
197 width : deviceWidth/30 ,
198 height : deviceWidth/30,
199 top : deviceHeight-deviceHeight/8 ,
200 right : deviceWidth / 2 + deviceWidth/15 ,
201 backgroundColor : 'gray' ,
202 borderRadius: deviceWidth/60,
203 opacity : 0.4 ,
204 flexDirection : 'column',
205 },
206 dotView3: {
207 position : 'absolute' ,
208 width : deviceWidth/30 ,
209 height : deviceWidth/30,
210 top : deviceHeight-deviceHeight/8,
211 right : deviceWidth / 2 ,
212 backgroundColor : 'gray' ,
213 borderRadius: deviceWidth/60,
214 opacity : 0.4 ,
215 flexDirection : 'column',
216 },
217 dotView4: {
218 position : 'absolute' ,
219 width : deviceWidth/30 ,
220 height : deviceWidth/30,
221 borderRadius: deviceWidth/60,
222 top : deviceHeight-deviceHeight/8,
223 right : deviceWidth / 2 - deviceWidth/15 ,
224 opacity : 0.4 ,
225 backgroundColor : 'gray' ,
226 flexDirection : 'column',
227 },
228 dotView5: {
229 position : 'absolute' ,
230 width : deviceWidth/30 ,
231 height : deviceWidth/30,
232 borderRadius: deviceWidth/60,
233 top : deviceHeight-deviceHeight/8,
234 right : deviceWidth / 2 - 2*deviceWidth/15 ,
235 opacity : 0.4 ,
236 backgroundColor : 'gray' ,
237 flexDirection : 'column',
238 },
239 dotImg : {
240 flex : 1 ,
241 },
242 titleBackView : {
243 flex : 1 ,
244 flexDirection : 'row',
245 justifyContent: 'center',
246 alignItems : 'center',
247
248 },
249 titleBackimg : {
250 flex:1,
251 resizeMode : 'contain',
252 height: 40,
253 width: 40,
254 marginTop : deviceHeight/60,
255 },
256 titleBackText : {
257 color: '#53CEFF' ,
258 fontSize : deviceHeight/50,
259 marginTop : deviceHeight/60,
260 },
261 titleCenter : {
262 flex: 5,
263 height:70,
264 width: 0 ,
265 alignItems: 'center',
266 },
267 titleCenterText :{
268 color: 'black',
269 fontSize: deviceHeight/30,
270 alignSelf : 'center',
271 textAlign : 'center',
272 },
273 titleCenterView : {
274 flexDirection : 'row',
275 justifyContent: 'center',
276 alignItems : 'center',
277 position : 'absolute',
278 right: deviceWidth / 2 - deviceHeight/30/2,
279 top : 0,
280 backgroundColor : 'green',
281 },
282 });
283
284 module.exports = ViewPagerAndroidExample;