f111fei / react-native-banner-carousel

a carousel component for React Native
103 stars 47 forks source link

和下拉刷新有点冲突 #7

Open 1280103995 opened 6 years ago

1280103995 commented 6 years ago

和这个RefreshControl 一起用的时候,两个都会触发

f111fei commented 6 years ago

请提供下gif截图

1280103995 commented 6 years ago

gif转不了,快速下拉有水平方向偏移就会出现了。

import React,{Component} from "react"; import {Image, StyleSheet, ScrollView, View, Dimensions, RefreshControl} from "react-native"; import Carousel from 'react-native-banner-carousel'; const screenW = Dimensions.get('window').width;

export default class ThreeScreen extends Component {

constructor(props) { super(props); this.state = { isRefreshing: false, }; }

onRefresh() { this.setState({isRefreshing: true}); setTimeout(() => { this.setState({ isRefreshing: false, }); }, 2000); }

render() { const images = [ "http://ww1.sinaimg.cn/large/0065oQSqly1frjd77dt8zj30k80q2aga.jpg", "http://ww1.sinaimg.cn/large/0065oQSqly1frjd4var2bj30k80q0dlf.jpg", "http://ww1.sinaimg.cn/large/0065oQSqly1frja502w5xj30k80od410.jpg" ]; return ( <ScrollView style={styles.container} refreshControl={ <RefreshControl refreshing={this.state.isRefreshing} onRefresh={this.onRefresh.bind(this)} />}

<Carousel autoplay autoplayTimeout={5000} loop index={0} pageSize={screenW}

{images.map((image, index) => this.renderPage(image, index))}

  </ScrollView>
);

}

renderPage(image, index) { return (

);

} }

const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFFFFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, } });