Carousel

Last Updated on : 2023-10-12 08:00:16download

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.

Type Required Default value
ViewPropTypes.style No None

dotStyle

Style of the indication dot.

Type Required Default value
ViewPropTypes.style No None

dotActiveStyle

Style of the currently activated indication dot.

Type Required Default value
ViewPropTypes.style No None

dotWrapperStyle

Style of the indication dot wrapper.

Type Required Default value
ViewPropTypes.style No None

bounces

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

Type Required Default value
boolean No true

hasDots

Whether there are indication dots.

Type Required Default value
boolean No true

loop

Whether to loop.

Type Required Default value
boolean No false

useViewPagerOnAndroid

Whether Android implementation mechanism uses viewPager.

Type Required Default value
boolean No true

autoplay

Whether to play automatically.

Type Required Default value
boolean No false

autoplayInterval

Automatic play interval in milliseconds.

Type Required Default value
number No 2000

selectedIndex

The currently activated index.

Type Required Default value
number No 0

dots

Custom indication dots.

Type Required Default value
props => React.ReactNode No defaultDots

carouselChange

Switch callback.

Type Required Default value
index => void No None