您的位置:首页 > Web前端 > React

react-native-ViewPagerAndroid

2016-07-12 14:41 417 查看
ViewPagerAndroid:

允许子视图相互左右划动,每个ViewPager中的子视图都会当做一个单独的页面,并且会占用整个组件页面

1-:

import  React, {Component} from 'react';

import {
AppRegistry,
View,
Text,
ViewPagerAndroid,
} from 'react-native';

class FristProject extends Component {
render(){
return(
<View>
<ViewPagerAndroid style={{height:200,padding:20,alignItems:'center'}} initialPage={0}>

<View style={{backgroundColor:'red'}}>

</View>

<View style={{backgroundColor:'yellow'}}>

</View>

</ViewPagerAndroid>
</View>
);
}
}

AppRegistry.registerComponent('FristProject', ()=>FristProject);


2-:属性&方法

initialPage:初始化索引页,可以通过setPage来更新页码,通过onPageSelected方法来监听页面滑动
keyboardDimissMode:设置拖拽滑动过程中是否需要显示键盘<enum:{none,ondarg}>
onPageScroll():页面活动时执行,该方法会回调传入的event.nativeEvent对象,该对象有以下参数可以使用:
-1:position <从左起的第一个可见页面的索引>
-2:offset 值的范围为{0,1} 当前页面的切换状态
onPageScrollStateChanged():页面滚动发生变化时调用,有三种状态
-1:idle   和页面滚动没有任何交互
-2:dragging  拖动中,当前页面在滑动
-3:setting   存在页面拖拽或者滑动的交互
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  viewpager