@manjiz/react-native-swiper v0.1.3

This swiper is modified based on leecade/react-native-swiper. Not the best Swiper component for React Native.

• Fixed some remained bugs.
• Both iOS and android use ScrollView.
• Removed some inessentials.
• Used typescript.
• Be Tested in one online project (lack of test...need more...)
• Dependencies Versions:
  • react-native@^0.55.4
  • react@^16.3.1

Example

• Taro Components RN
  • 京東拼購 iOS and android. The Swiper is locate in the index.

Installation

npm i @manjiz/react-native-swiper --save

Basic Usage

import React, { Component } from 'react'
import {
  View,
  Text
} from 'react-native'
import Swiper from '@manjiz/react-native-swiper'

class Example extends Component {
  onIndexChanged = (index: number) => {
  }

  onMomentumScrollEnd = (e, state) => {
  }

  render () {
    const slideStyle = { flex: 1, justifyContent: 'center', alignItems: 'center' }

    return (
      <Swiper
        autoplay={true}
        autoplayTimeout={6}
      >
        <View style={[slideStyle, { backgroundColor: 'red' }]}>
          <Text>Red</Text>
        </View>
        <View style={[slideStyle, { backgroundColor: 'green' }]}>
          <Text>Green</Text>
        </View>
        <View style={[slideStyle, { backgroundColor: 'blue' }]}>
          <Text>Blue</Text>
        </View>
      </Swiper>
    )
  }
}

export default Example

Properties

Basic

Element

Styleus

Native ScrollView Props

No need to change them.

Event

Supported ScrollResponder

Note: each ScrollResponder be injected with two params: state and context, you can get state and context(ref to swiper's this) from params.

Methods

scrollBy

Scroll by relative index.

Parameters:

Contribution

Local Development

rsync -avr ~/react-native-swiper/dist ~/MyApp/node_modules/@manjiz/react-native-swiper