react-native-ViewPagerAndroid

Posted 2022-12-13 time_iter

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   存在页面拖拽或者滑动的交互