参考资料：http://reactscript.com/react-native-card-carousel-component/
import React,{Component} from ‘react‘;
import {
StyleSheet,
Text,
Image,
View
} from ‘react-native‘;
import CarouselCard from ‘../carouselCard/Card‘;
import Carousel,{Pagination} from ‘react-native-snap-carousel‘;
// ES6生成组件 (推荐)
export default class MyCarouselCard extends React.Component {
constructor(props) {
super(props);
this.state = {
itemArr: [
require(‘../images/sowingone.png‘),
require(‘../images/sowingtwo.png‘),
require(‘../images/sowingthree.png‘)
]
}
}
_renderItem({item,index}) {
return <MySlideComponent data={item}/>
}
get pagination() {
const {itemArr,activeSlide} = this.state;
return (
<Pagination
dotsLength={this.state.itemArr.length}
activeDotIndex={activeSlide}
containerStyle={{backgroundColor: ‘rgba(0,0.75)‘}}
dotStyle={{
width: 30,
height: 30,
borderRadius: 10,
marginHorizontal: 8,
backgroundColor: ‘red‘
}}
inactiveDotStyle={{
width: 30,
backgroundColor: ‘#000‘
}}
inactiveDotOpacity={0.4}
inactiveDotScale={0.6}
/>
);
}
render() {
return (
<View style={styles.cont}>
<View style={styles.container}>
<CarouselCard
width={596}
height={403}
backgroundColor=‘red‘
autoplay
interval={4000}
data={this.state.itemArr}
onPress={item => {
}}
contentRender={item => <Image source={item} style={{width: 596,height: 403}}/> }
/>
</View>
<View style={styles.cont1}>
<Carousel
itemWidth={500}
itemHeight={300}
windowSize={10}
data={this.state.itemArr}
renderItem={this._renderItem}
onSnapToItem={(item) => this.setState({activeSlide: item})}
/>
{this.pagination}
</View>
</View>
)
}
}
const styles = StyleSheet.create({ container: { flex:4,width:980,height:450,backgroundColor: ‘blue‘ },cont: { flex:1,flexDirection:"column",width: 1000,height:550,borderWidth: 2 },cont1: { flex:1 },item: { width: 700,height: 100 }});
