rn 实现上下滑动选择列表_RN-实现抖音切换视频效果

实现效果

1、上下滑动切换

2、 左滑动弹出列表，右滑动取消列表

3、加载更多、刷新

实现效果

思路

通过滑动的x、y判断是上下滑动还是左右滑动

1.上下滑动

滑动中：通过 flatList.scrollToOffset 设置flatList的滚动位置

滑动结束：通过判断滑动的位置 || 滑动的速度 进行切换页面

滑动距离超过屏幕的1/4

滑动结束时间 - 滑动开始时间 < 300 && 滑动距离超过 50

再通过flatList.scrollToIndex设置flatList的滚动位置

2.左滑动，显示RightView.RightView position:'absolute' left: screenWidth

左滑动过程中setState left 的值，配合LayoutAnimation实现RightView弹出

3.下拉刷新，上拉加载

下拉刷新：第一页的位置，下拉超过30，则显示ListHeaderComponent

上拉加载：最后一页的位置，上拉超过30，则显示loadingComponent

RightView 手势

右滑动：setState left 的值，配合LayoutAnimation实现RightView消失

具体代码

index.,js

class ClassName extends React.Component {

constructor(props) {

super(props);

this.props.navigation.setOptions({ headerShown: false })

if (Platform.OS === 'android') {

UIManager.setLayoutAnimationEnabledExperimental && UIManager.setLayoutAnimationEnabledExperimental(true)

}

this.state = {

list: [1,2,3,4,5],

cityListLeft:width,

refreshing:false,

isLoading:false

}

this.startTime = 0 // 滚动开始时间

this.endTime = 0 // 滚动结束时间 ，用于计算滚动的速度(结束时间 - 开始时间，时间越短，滚动速度越快)

this.page = 0 // 当前页

// 根据滑动的距离 或者 滑动的速度且滑动距离大于50，判断是否切换

// 纵向滚动切换页面条件一

this.minSlideDistance = 50 // 滚动时间符合要求时的最小滚动距离

this.maxSlideTime = 300 // 最大的滚动时间,

// 条件二

this.minSlideScaleY = 1 / 4 // 最小的滚动比例

// 横向滚动显示页面

this.minSlideScaleX = 1 / 4 // 最小的拖动比例

this.isRefresh = false // 用于判断是否处于下拉刷新中，减少下拉过程总多次setState

this.isLoadMore = false // 用于判断是否处于上拉加载更多中，减少上拉过程总多次setState

// 初始化时定义，不要在render中定义

this.viewabilityConfig = {viewAreaCoveragePercentThreshold: 80}

this.panResponder = PanResponder.create({