最近开发了个功能 轮播切换的效果。只不过是垂直的方向切换;效果大概是下面这个样子;IOS端垂直切换是没有问题的。但是在安卓端是不可以的;
垂直切换.gif就看了一下源码;放一下主要的代码。这边他做了IOS和安卓端的区分;
IOS就是使用正常的ScrollView进行展示的 安卓端使用的是原生模块ViewPagerAndroid
问了下安卓同事。说这个模块就是不支持垂直滚动的;
renderScrollView = pages => {
if (Platform.OS === 'ios' || Platform.OS === 'web') {
return (
<ScrollView ref={this.refScrollView}
{...this.props}
{...this.scrollViewPropOverrides()}
contentContainerStyle={[styles.wrapperIOS, this.props.style]}
contentOffset={this.state.offset}
onScrollBeginDrag={this.onScrollBegin}
onMomentumScrollEnd={this.onScrollEnd}
onScrollEndDrag={this.onScrollEndDrag}
style={this.props.scrollViewStyle}>
{pages}
</ScrollView>
)
}
let r = require('react-native')
return (
<r.ViewPagerAndroid ref={this.refScrollView}
{...this.props}
initialPage={this.props.loop ? this.state.index + 1 : this.state.index}
onPageSelected={this.onScrollEnd}
key={pages.length}
style={[styles.wrapperAndroid, this.props.style]}>
{pages}
</r.ViewPagerAndroid>
)
}
然后怎么办呢、 我是这样干的。。。。就是让他们所有的系统都用ScrollView、说实在的我也不知道为什么要做这个区分。。就测试了下 发现都支持了。。
renderScrollView = pages => {
return (
<ScrollView ref={this.refScrollView}
{...this.props}
{...this.scrollViewPropOverrides()}
contentContainerStyle={[styles.wrapperIOS, this.props.style]}
contentOffset={this.state.offset}
onScrollBeginDrag={this.onScrollBegin}
onMomentumScrollEnd={this.onScrollEnd}
onScrollEndDrag={this.onScrollEndDrag}
style={this.props.scrollViewStyle}>
{pages}
</ScrollView>
)
}
但是哦 我上面的gif 是做了点击然后 出发切换效果的;用的是scrollBy 这个方法;
这边也需要处理一下;看一下最初代码
scrollBy = (index, animated = true) => {
if (Platform.OS !== 'ios') {
this.scrollView && this.scrollView[animated ? 'setPage' : 'setPageWithoutAnimation'](diff)
} else {
this.scrollView && this.scrollView.scrollTo({ x, y, animated })
}
}
因为 setPage和setPageWithoutAnimation 是ViewPagerAndroid 这个里面写的方法;所以出发这个方法 汇报找不到这个函数;
于是乎 简单粗暴的改一下-统一都使用 scrollView 的scrollTo方法进行滚动
this.scrollView && this.scrollView.scrollTo({ x, y, animated })
好了 记录一下。希望帮助到有需要的小伙伴们;
可能还有其他方法用到了原来安卓ViewPagerAndroid里面的方法。但是我没用到。 那就自行解决吧。。。。
网友评论