Нет описания

胡家华 62719d6ea5 clone to gogs лет назад: 5
__tests__ 62719d6ea5 clone to gogs лет назад: 5
android 62719d6ea5 clone to gogs лет назад: 5
ios 62719d6ea5 clone to gogs лет назад: 5
lib 62719d6ea5 clone to gogs лет назад: 5
.buckconfig 62719d6ea5 clone to gogs лет назад: 5
.flowconfig 62719d6ea5 clone to gogs лет назад: 5
.gitattributes 62719d6ea5 clone to gogs лет назад: 5
.gitignore 62719d6ea5 clone to gogs лет назад: 5
.watchmanconfig 62719d6ea5 clone to gogs лет назад: 5
App.js 62719d6ea5 clone to gogs лет назад: 5
LICENSE 62719d6ea5 clone to gogs лет назад: 5
README.md 62719d6ea5 clone to gogs лет назад: 5
app.json 62719d6ea5 clone to gogs лет назад: 5
babel.config.js 62719d6ea5 clone to gogs лет назад: 5
index.js 62719d6ea5 clone to gogs лет назад: 5
metro.config.js 62719d6ea5 clone to gogs лет назад: 5
package.json 62719d6ea5 clone to gogs лет назад: 5
screenshot.gif 62719d6ea5 clone to gogs лет назад: 5
yarn.lock 62719d6ea5 clone to gogs лет назад: 5

README.md

RN-Swiper

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

ScreenShot

image

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