yarn add @krmao/react-native-captcha
yarn add react-native-gesture-handler
yarn add react-native-reanimated
yarn add react-native-get-random-values
yarn add crypto-jsimport Captcha from '@krmao/react-native-captcha';
export default function App() {
return (
<SafeAreaView style={styles.root}>
<ScrollView style={styles.scrollView} contentContainerStyle={styles.scrollViewContainer}>
<StatusBar translucent={true} backgroundColor={'#0000ff33'} barStyle={'dark-content'} />
</ScrollView>
<Captcha />
</SafeAreaView>
);
}export interface CaptchaProps {
/**
* 禁用滑块滑动, default false
*/
disableSlider?: boolean;
localBubbleBehindType?: LocalBubbleBehindType;
/**
* 校验的误差范围内算成功 default 3
*/
maxOffset?: number;
/**
* 滑块尺寸 default 38
*/
thumbSize?: number;
/**
* 弹窗尺寸 default 49
*/
bubbleSize?: number;
/**
* 底图宽度 default 292
*/
imageWidth?: number;
/**
* 底图高度 default 145
*/
imageHeight?: number;
verifyLocal?: (
sliderCurrentProgress: number,
randomBubbleXProgress: number,
maxOffset: number,
events: PanGestureHandlerEventPayload[],
touchTime: number | undefined
) => boolean;
verifyRemote?: (
isVerifyLocalSuccess: boolean,
slideValue: number,
maxOffset: number,
events: PanGestureHandlerEventPayload[],
touchTime: number | undefined
) => Promise<boolean>;
/**
* sliding start
*/
onSlidingStart?: () => void;
onSlidingTouchBegin?: () => void;
/**
* on refresh clicked
*/
onRefreshClicked?: () => void;
onSlidingComplete?: () => void;
/**
* replace the all background image sources
*/
imageBackgroundSources?: ImageSourcePropType[];
/**
* replace the all bubble image sources
*/
imageBubbleSources?: BubbleSource[];
/**
* replace the refresh image sources
*/
imageRefreshSource?: ImageSourcePropType;
/**
* 向右滑动滑块解锁拼图
*/
defaultSliderText?: string;
}- I will remove the react-native-awesome-slider source code if my Pull request is merged
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Made with create-react-native-library