Carousel

Carousel is a slideshow component.

Code demo

Note:

• For more information, see Carousel Demo.

• The slideshow component must set the height of the component. You can add onLayout={e => this.\_onLayout(e)} to the parent component, and obtain the parent element height. Alternatively, you can set the height of the slideshow component with a variable, and make adaptive settings.

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

Style of the carousel.

dotStyle

Style of the indication dot.

dotActiveStyle

Style of the currently activated indication dot.

dotWrapperStyle

Style of the indication dot wrapper.

bounces

Whether scroll bouncing occurs when the content range is larger than the scroll view itself.

hasDots

Whether there are indication dots.

loop

Whether to loop.

useViewPagerOnAndroid

Whether Android implementation mechanism uses viewPager.

autoplay

Whether to play automatically.

autoplayInterval

Automatic play interval in milliseconds.

selectedIndex

The currently activated index.

dots

Custom indication dots.

carouselChange

Switch callback.