react-native-slide-verify
<SlideVerify> component for react-native 0.70.0 with TypeScript support. Drag the slider to fill the puzzle for verifying normal operation.
Installation
yarn add @vkorotenko/react-native-slide-verifyensure to link react-native-vector-icons
Remarks
Local npm https://habr.com/ru/post/427069/
Usage
import SlideVerify from '@vkorotenko/react-native-slide-verify'
...
render() {
return (
<View style={{ alignItems: 'center', justifyContent: 'center', marginVertical: 20}}>
// use default verify images
<SlideVerify
useDefault
onVerifyPassed={alert('passed')}
onVerifyFailed={alert('failed')}
/>
// use specified verify images
<SlideVerify
puzzle={{ url: 'url/to/image'}}
puzzlePiece={require('path/to/image')}
slideVerify={offset => { console.log(offset); return Promise.resolve() }}
showRefresh
refresh={() => alert('refresh')}
slideTips={I18n.t('slideTips')}
>
</View>
)
}Component Props
use default verify images
| Property | Type | Description |
|---|---|---|
useDefault |
bool (default false) | use default verify images |
onVerifyPassed |
func (default () => {}) |
verify passed callback |
onVerifyFaild |
func (default () => {}) |
verify failed callback |
use specified verify images
| Property | Type | Description |
|---|---|---|
imageSize |
object ({puzzleWidth: number(default 300), puzzleHeight: number(default 150), puzzlePieceWidth: number(default 50)}) |
optional. custom image diplay size, related to slide offset (puzzleWidth decides the container width) |
puzzle |
object or number | background image. object with {url: 'xxx'} or result of require('path/to/image')
|
puzzlePiece |
object or number | piece image. object with {url: 'xxx'} or result of require('path/to/image')
|
showRefresh |
bool (default false) |
show refresh icon on the top right corner |
refresh |
func (default () => {}) |
refresh icon onPress listener |
slideVerify |
func (default () => {}) |
called to verify when releasing finger on the dragging slider. pass offset as param. The func should return promise of verify result
|
common props
| Property | Type | Description |
|---|---|---|
displayType |
string (default 'triggered') |
puzzle image display type. enum('triggered', 'embedded') |
slideTips |
string (default '向右滑动左侧箭头填充拼图') |
slide tips showed in slide box |
