初学:react-native 轮播图

Posted 寒夜美美

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了初学:react-native 轮播图相关的知识,希望对你有一定的参考价值。

参考资料: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
}
});

 

以上是关于初学:react-native 轮播图的主要内容,如果未能解决你的问题,请参考以下文章

ReactNative实现轮播图

react-swipeable-views轮播图实现下方的切换点控制组件

react简单的轮播图实现 1

react 简单轮播图实现

React Native布局实践:开发京东客户端首页——轮播图的实现

手动封装轮播图组件(Vue3)