初学：react-native 轮播图

Posted 2020-11-09 寒夜美美

参考资料：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, 0, 0.75)‘}}
dotStyle={{
width: 30,
height: 30,
borderRadius: 10,
marginHorizontal: 8,
backgroundColor: ‘red‘
}}
inactiveDotStyle={{
width: 30,
height: 30,
borderRadius: 10,
marginHorizontal: 8,
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
}
});