Carousel 轮播

Carousel是一个轮播图组件。

代码演示

说明：

• 详细 demo 可参见 Carousel Demo。
• 轮播组件必须给组件设置高度。您可以通过给父组件添加 onLayout={e => this.\_onLayout(e)} 获取父元素高度；或通过变量设置轮播组件的高度，进行自适应设置。

import React from "react";
import { View, StyleSheet, TouchableOpacity } from "react-native";
import { Carousel, TYText } from "tuya-panel-kit";

class CarouselScene extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      index: 0,
    };
  }
  render() {
    return (
      <View style={styles.containerStyle}>
        <Carousel
          style={{ height: 180 }}
          selectedIndex={this.state.index}
          autoplay={true}
          loop={true}
          carouselChange={(index) => console.log(index)}
        >
          <View style={{ flex: 1, backgroundColor: "red" }}>
            <TYText style={{ color: "#333" }}>Carousel 1</TYText>
          </View>
          <View style={{ flex: 1, backgroundColor: "blue" }}>
            <TYText style={{ color: "#333" }}>Carousel 2</TYText>
          </View>
          <View style={{ flex: 1, backgroundColor: "yellow" }}>
            <TYText style={{ color: "#333" }}>Carousel 3</TYText>
          </View>
        </Carousel>
        <TouchableOpacity onPress={() => this.setState({ index: 1 })}>
          <TYText>Click Me!</TYText>
        </TouchableOpacity>
      </View>
    );
  }
}

export default CarouselScene;

const styles = StyleSheet.create({
  containerStyle: {
    flex: 1,
    paddingHorizontal: 16,
  },
});

交互演示

API

style

轮播图的样式。

类型	必传	默认值
ViewPropTypes.style	否	无

dotStyle

指示点样式。

类型	必传	默认值
ViewPropTypes.style	否	无

dotActiveStyle

当前激活的指示点样式。

类型	必传	默认值
ViewPropTypes.style	否	无

dotWrapperStyle

指示点容器样式。

类型	必传	默认值
ViewPropTypes.style	否	无

bounces

当内容范围比滚动视图本身大时，是否进行弹性拉动。

类型	必传	默认值
boolean	否	true

hasDots

是否有指示点。

类型	必传	默认值
boolean	否	true

loop

是否循环。

类型	必传	默认值
boolean	否	false

useViewPagerOnAndroid

安卓的实现机制是否使用 viewPager。

类型	必传	默认值
boolean	否	true

autoplay

是否自动播放。

类型	必传	默认值
boolean	否	false

autoplayInterval

自动播放间隔时间，单位为 ms。

类型	必传	默认值
number	否	2000

selectedIndex

当前激活的索引。

类型	必传	默认值
number	否	0

dots

自定义指示点。

类型	必传	默认值
props => React.ReactNode	否	defaultDots

carouselChange

切换回调。

类型	必传	默认值
index => void	否	无