RNSwiper

RN-Swiper

详见gitHub:https://github.com/CQKM/RN-Swiper

ScreenShot

or project/screenshot.gif

Usage

yarn add rnezswiper or npm install rnezswiper

import RNSwiper from 'rnezswiper'

let data = 'HelloWord'.toUpperCase().split('')
const { width, height } = Dimensions.get("window")

<View style={styles.container}>
    <View style={{ height: 200 }}> // wrapStyle
        <RNSwiper
        loop
        autoPlay
        initIndex={0}
        onChangeIndex={(index) => {  }}
        slideStyle={styles.slideStyle}
        renderPagination={(index) => { // customize pagination
            return (
            <View style={[{ position: 'absolute', bottom: 0, height: 30, width, left: 0,zIndex: 1 }]}>
                <Text style={{ color: '#fff',textAlign: 'center' }}>{`${index + 1}/${data.length}`}</Text>
            </View>
            )
        }}
        >
        {
            data.map(item => <Text key={item} style={styles.font}>{item}</Text>)
        }
        </RNSwiper>
    </View>
    <Text>other content</Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  font: {
    color: '#fff',
    fontSize: 30
  },
  slideStyle: { height: 200, width, backgroundColor: '#7e57c2' },
});

Properties

Prop | Default | Type | Description -|-|-|- slideStyle | {} | ViewStyle | none loop | true | boolean | Set to false to disable continuous loop mode. autoPlay | true | boolean | Set to true enable auto play mode. autoPlayTimeOut | 3000 | number | auto paly delay initIndex | 0 | number | Index number of initial slide onIndexChanged | (index) => null | function | Called with the new index when the user swiped renderPagination | (index) => null | JSX | customize pagination animation | (value, toValue) => Animated | function | customize animated