Carousel 轮播

更新时间:2024-06-05 03:14:29下载pdf

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,
  },
});

交互演示

Carousel 轮播

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