在項目中如何應用swiper

react-native init swiper

import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { StyleSheet, TouchableWithoutFeedback, View } from 'react-native';
import RNSwiper from 'react-native-swiper';
const styles = StyleSheet.create({
 activeDotWrapperStyle: {
 //圓點樣式
 },
 activeDotStyle: {
 //圓點樣式
 },
 dotStyle: {
 //圓點樣式
 }
});
const activeDot = (
 <View style={styles.activeDotWrapperStyle}>
 <View style={styles.activeDotStyle} />
 </View>
);
const dot = <View style={styles.dotStyle} />;
export class Carousel extends Component {
 // Define component prop list
 static propTypes = {
 data: PropTypes.array,
 height: PropTypes.number,
 onPressItem: PropTypes.func,
 renderItem: PropTypes.func.isRequired,
 autoplay: PropTypes.bool,
 autoplayTimeout: PropTypes.number
 };
 // Define props default value
 static defaultProps = {
 data: [],
 height: 150,
 autoplay: true,
 autoplayTimeout: 2.5,
 onPressItem: () => {},
 renderItem: () => {}
 };
 // Define inner state
 state = {
 showSwiper: false
 };
 constructor(props) {
 super(props);
 this.handleItemPress = this.handleItemPress.bind(this);
 }
 componentDidMount() {
 setTimeout(() => {
 this.setState({ showSwiper: true });
 });
 }
 handleItemPress(item) {
 this.props.onPressItem(item);
 }
 _renderSwiperItem(item, index) {
 return (
 <TouchableWithoutFeedback key={index} onPress={() => this.handleItemPress(item)}>
 <View style={[{ flex: 1 }]}>{this.props.renderItem(item)}</View>
 </TouchableWithoutFeedback>
 );
 }
 render() {
 return this.props.data.length === 0 || !this.state.showSwiper ? null : (
 <RNSwiper
 height={this.props.height} //圖片高度
 activeDot={activeDot} 
 dot={dot}
 style={{ backgroundColor: '#fff' }}
 autoplay={this.props.autoplay} //是否自動輪播
 autoplayTimeout={this.props.autoplayTimeout} //輪播秒數
 >
 {this.props.data.map((item, idx) => this._renderSwiperItem(item, idx))} //如果數據是個對象里面的數組加一個循環(huán)
 </RNSwiper>
 );
 }
}

import { Carousel } from './carousel/Carousel';
export { Carousel };

import PropTypes from 'prop-types';
import React, { Component } from 'react';
export class TryCarousel extends Component {
 // Define component prop list
 static propTypes = {};
 // Define props default value
 static defaultProps = {};
 // Define inner state
 state = {};
 constructor(props) {
 super(props);
 }
 // LifeCycle Hooks
 // Prototype Functions
 // Ensure the latest function is render
 render() {}
}

import { HigoCarousel } from '../../components';
<Carousel
 data={} //接受的數據
 onPressItem={} //點擊事件
 height={} //圖片高度
 autoplay={} //是否自動播放
 autoplayTimeout={} //過渡時間
 renderItem={item => {
 return <Image source={{ uri: item.imageSource }} style={{ flex: 1 }} />;
 }} //圖片
/>