ReactNative 设置手势密码
来源：互联网 发布：淘宝店铺标题图片 编辑：程序博客网 时间：2024/06/05 20:22
import React, {Component} from "react";import { Slider, ListView, Text, ScrollView, View, TouchableOpacity, Dimensions, StyleSheet, Alert, Platform, Image, TextInput, AsyncStorage} from "react-native";import GesturePassword from "react-native-smart-gesture-password";import {Navigation} from "react-native-navigation";import Apis, {LoginForm, LoginRet,UserBase} from "app-js-sdk";import Commons, {ProgressView, Link, context,HocNavScreen} from "commons";type Props ={ isEditGesturePassWord:Number, navigator:Object, createGesture:Function, isLogin:Boolean, isSetPassword:Boolean, account:String, closeModal:Function,}const GESTURE_PASSWORD_KEY = "$GesturePassWord";const GESTURE_PASSWORD_ACCOUNT = "$GestureAccount";const SETUP_GESTURE_PASSWORD = "$SetupGesturePassWord";const GESTURE_TOKEN = "$GestureToken";class GesturePasswordScreen extends Component { commons: Commons = new Commons().bind(this); state = { isWarning: false, message: '', messageColor: '#A9A9A9', password: '', thumbnails: [], isEditGesturePassWord:1, passWordErrorTimes:0, _cachedPassword:null, mobile:'', }; props:Props; constructor(props:Props) { super(props); this.props.navigator.setOnNavigatorEvent(this.onNavigatorEvent); } componentDidMount() { this.getMobile(); this.setState({ isEditGesturePassWord:this.props.isEditGesturePassWord, }); AsyncStorage.getItem(GESTURE_PASSWORD_KEY, (error: Error, result: string) => { this.setState({ _cachedPassword:result }) }) }; isSuccesLogin = false; componentWillUnmount = () => { context._onCloseLoginDialog(this.isSuccesLogin); if (!this.isSuccesLogin) { context.navigatorPopToRoot(); } }; getMobile =()=>{ AsyncStorage.getItem(GESTURE_PASSWORD_ACCOUNT, (error: Error, result: string) => { this.setState({ mobile:result }) }) } onNavigatorEvent=(event)=>{ if(event.id == "didAppear" && !this.props.isLogin && !this.props.isSetPassword){ this.props.navigator.dismissLightBox(); } if (event.id == 'back') { context.navigatorPopToRoot(); this.props.navigator.dismissModal({ animationType: 'slide-down' }); } } render() { const {height, width} = Dimensions.get('window'); return <View style={[styles.wrap]}> <GesturePassword pointBackgroundColor={'transparent'} isWarning={this.state.isWarning} color={'#FF4C00'} gestureAreaLength={width*0.75} gesturePadding={0} activeColor={'#FF4C00'} warningColor={'red'} lineWidth={2} showArrow={false} warningDuration={1500} allowCross={true} topComponent={this._renderDescription()} bottomComponent={this._renderActions()} onFinish={this._onFinish} onReset={this._onReset} /> </View> } _renderThumbnails() { let thumbnails = [] const {height, width} = Dimensions.get('window'); let thumbSize = width * (13 / 375); let margin = width * (5.5 / 375); for (let i = 0; i < 9; i++) { let active = ~this.state.password.indexOf(i) thumbnails.push(( <View key={'thumb-' + i} style={[ {width: thumbSize, height: thumbSize, margin: margin, borderRadius: thumbSize, }, active ? {backgroundColor: '#FF4C00'} : {borderWidth: 1, borderColor: '#FF4C00'} ]} /> )) } return ( <View style={{width: thumbSize*3 + margin*6,flexDirection: 'row', flexWrap: 'wrap',}}> {thumbnails} </View> ) } _renderDescription = () => { return ( <View style={{height: 158, paddingBottom: 10,justifyContent: 'flex-end', alignItems: 'center',}}> {(()=>{ if(this.state.isEditGesturePassWord==1){ return ([<View key="v1" style={{padding: 10}}><Text>请绘制手势密码</Text></View>,<View key="v2">{this._renderThumbnails()}</View>]); }else if(this.state.isEditGesturePassWord==2){ return <Text>绘制手势图形</Text> }else{ return <Text>再绘制一次刚才的手势图形</Text> } })() } <Text style={{fontFamily: '.HelveticaNeueInterface-MediumP4', fontSize: 14, marginVertical: 6, color: this.state.messageColor}}> {this.state.message} </Text> </View> ) }; _renderActions = () => { return ( <View style={{flex:1, justifyContent: 'center', alignItems:'center', flexDirection: 'row', width: Dimensions.get('window').width,}}> <View > {(()=>{ {/*if(this.props.isLogin==true){*/} {/*return<TouchableOpacity onPress={this.gotoLogin}>*/} {/*<Text style={{color:"#FF5200", textAlign:'center'}}>忘记密码？</Text>*/} {/*</TouchableOpacity>*/} {/*/!*return<TouchableOpacity onPress={this.gotoLoginWithAccount}>*!/*/} {/*/!*<Text style={{color:"#FF5200", textAlign:'center'}}>账户密码登录</Text>*!/*/} {/*/!*</TouchableOpacity>*!/*/} {/*}else */} if(this.state.isEditGesturePassWord==1){ return<TouchableOpacity onPress={this.gotoLogin}> <Text style={{color:"#FF5200", textAlign:'center'}}>忘记密码？</Text> </TouchableOpacity> } })() } </View> </View> ) }; gotoLogin=()=>{ Alert.alert('','您需要通过重新登录来设置新的手势密码',[{text:'重新登录',onPress:()=>{ Navigation.showModal({ screen: "LoginAndRegister.LoginScreen", // unique ID registered with Navigation.registerScreen title: "登录", // title of the screen as appears in the nav bar (optional) passProps: {toGestureResetPassword:this.toGestureResetPassword}, // simple serializable object that will pass as props to the modal (optional) animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up') }) }}] ) } toGestureResetPassword =()=>{ AsyncStorage.removeItem(GESTURE_PASSWORD_KEY); AsyncStorage.removeItem(GESTURE_PASSWORD_ACCOUNT); AsyncStorage.removeItem(SETUP_GESTURE_PASSWORD); this.setState({isEditGesturePassWord:2,message:''}); this.props.navigator.setTitle({ title: "创建手势密码" // the new title of the screen as appears in the nav bar }); this.commons.apis.userApi.getUser().then((m:UserBase)=>{ this.setState({ mobile:m.mobile }) }).default(); } _onReset = () => { let isWarning = false //let password = '' let message = this.state.message let messageColor = '#A9A9A9' this.setState({ isWarning, //password, message, messageColor, }) }; _onFinish = (password) => { if(this.props.isLogin==true && this.state.isEditGesturePassWord==1){ if(password.length < 4){ this.setState({ isWarning:true, message:'至少链接4个点，请重新输入', messageColor:'red', }) }else if(password === this.state._cachedPassword){ AsyncStorage.getItem(GESTURE_TOKEN, (error: Error, result: string) => { context.saveToken(result); Apis.setToken(result); }) this.isSuccesLogin = true; Navigation.dismissModal({ animationType: 'slide-down' }); // this.commons.apis.accountApi.login(LoginForm.form( // null,this.state.mobile // )).then((m: LoginRet) => { // this.isSuccesLogin = true; // Navigation.dismissModal({ // animationType: 'slide-down' // }); // context.saveToken(m.token); // Apis.setToken(m.token); // // this.isSuccesLogin = true; // // if(this.props.toResetPassword){ // // this.props.toResetPassword(); // // } // }).default(); }else{ if(this.state.passWordErrorTimes === 5){ Alert.alert('','输错次数过多，请使用账户密码登录并重新设置手势密码',[{text:'账号密码登录',onPress:()=>{ Navigation.showModal({ screen: "LoginAndRegister.LoginScreen", // unique ID registered with Navigation.registerScreen title: "登录", // title of the screen as appears in the nav bar (optional) passProps: {closeModal:this.toGestureResetPassword}, // simple serializable object that will pass as props to the modal (optional) animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up') }) }}],{ cancelable: false } ) }else { let isWarning = true let passWordErrorTimes = this.state.passWordErrorTimes+1 let leftPassWordTimes = 6 -passWordErrorTimes let message ='输入错误次数'+passWordErrorTimes+'次，还可以重试'+leftPassWordTimes+'次' let messageColor = 'red' this.setState({ isWarning, message, messageColor, passWordErrorTimes, password, }) } } }else if(this.props.isLogin==true && this.state.isEditGesturePassWord==2){ if(password.length < 4){ this.setState({ isWarning:true, message:'至少链接4个点，请重新输入', messageColor:'red', }) }else { this.setState({ isEditGesturePassWord:this.state.isEditGesturePassWord+1, password, message:'', }) } }else if(this.props.isLogin==true && this.state.isEditGesturePassWord==3){ if(password === this.state.password){ AsyncStorage.setItem(GESTURE_PASSWORD_KEY,password); AsyncStorage.setItem(GESTURE_PASSWORD_ACCOUNT,this.state.mobile); Alert.alert('','设置手势密码成功',[{text:'OK',onPress:()=>{ if(this.props.createGesture){this.props.createGesture();} Navigation.dismissAllModals({ animationType: 'slide-down' }); }}], { cancelable: false } ) }else{ this.setState({ isWarning:true, messageColor:'red', message:'再绘制的图案不一致，请重新输入' }) } } else if(this.state.isEditGesturePassWord==1){ if(password.length < 4){ this.setState({ isWarning:true, message:'至少链接4个点，请重新输入', messageColor:'red', }) }else if(password === this.state._cachedPassword){ this.setState({ isEditGesturePassWord:this.state.isEditGesturePassWord+1, message:'', }) }else{ if(this.state.passWordErrorTimes === 4){ Alert.alert('','输错次数过多，请重新登录并重新设置手势密码',[{text:'重新登录',onPress:()=>{ Navigation.showModal({ screen: "LoginAndRegister.LoginScreen", // unique ID registered with Navigation.registerScreen title: "登录", // title of the screen as appears in the nav bar (optional) passProps: {toGestureResetPassword:this.toGestureResetPassword}, // simple serializable object that will pass as props to the modal (optional) animationType: 'slide-up' // 'none' / 'slide-up' , appear animation for the modal (optional, default 'slide-up') }) }}], { cancelable: false } ) }else { let isWarning = true let passWordErrorTimes = this.state.passWordErrorTimes+1 let leftPassWordTimes = 5 -passWordErrorTimes let message ='输入错误次数'+passWordErrorTimes+'次，还可以重试'+leftPassWordTimes+'次' let messageColor = 'red' this.setState({ isWarning, message, messageColor, passWordErrorTimes, password, }) } } }else if(this.state.isEditGesturePassWord==2){ if(password.length < 4){ this.setState({ isWarning:true, message:'至少链接4个点，请重新输入', messageColor:'red', }) }else { this.setState({ isEditGesturePassWord:this.state.isEditGesturePassWord+1, password, message:'', }) } }else{ if(password === this.state.password){ AsyncStorage.setItem(GESTURE_PASSWORD_KEY,password); AsyncStorage.setItem(GESTURE_PASSWORD_ACCOUNT,this.props.account); Alert.alert('','设置手势密码成功',[{text:'OK',onPress:()=>{ if(this.props.closeModal){this.props.closeModal();Navigation.dismissAllModals();} if(this.props.createGesture){ this.props.createGesture();this.props.navigator.pop(); }else{ this.props.navigator.pop(); } }}] ,{ cancelable: false } ) // this.setState({ // _cachedPassword:password, // }) //floating layer 3s //jump }else{ this.setState({ isWarning:true, messageColor:'red', message:'再绘制的图案不一致，请重新输入' }) } } };}export default HocNavScreen(GesturePasswordScreen);const styles = StyleSheet.create({ wrap: { backgroundColor: '#fff', flex: 1, }, parkbar: { height: 20, backgroundColor: '#000', }, nav: { flexDirection: 'row', paddingLeft: 15, paddingRight: 15, alignItems: 'center', borderBottomWidth: 0.5, borderStyle: 'solid', borderBottomColor: '#dedede', }, arrowBar: { flex: 2, }, tab: { height: 44, justifyContent: 'center', alignItems: 'center', flex: 8, backgroundColor: 'transparent', }, tabText: { color: '#333', fontSize: 17, }, share: { flex: 2, height: 44, justifyContent: 'center', alignItems: 'flex-end', }, stext: { color: '#fff', fontSize: 17, }, // h100: { height: 50, }, titlebar: { height: 49, justifyContent: 'center', alignItems: 'center', }, title: { color: '#333', fontSize: 18, }, // gesture: { flexDirection: 'row', flexWrap: 'wrap', }, circle: { width: 60, height: 60, borderBottomLeftRadius: 60, borderBottomRightRadius: 60, borderTopLeftRadius: 60, borderTopRightRadius: 60, borderWidth: 1, borderStyle: 'solid', borderColor: '#FF7A21', overflow: 'hidden', marginLeft: 27, marginRight: 27, marginBottom: 27, marginTop: 27, }, // warning: { height: 50, alignItems: 'center', }, warn: { color: '#ff0d0d', fontSize: 15, marginTop: 25, },});阅读全文
0 0
- ReactNative 设置手势密码
- Android设置手势密码
- Android 手势密码开启状态设置
- 手势密码
- 手势密码
- 手势密码
- 手势密码
- 手势密码
- 手势密码
- 手势密码
- ReactNative 大图手势浏览技术分析
- IOS 手势密码 解决
- iOS手势密码
- html5 手势密码
- cordova sqlite 手势密码
- android手势密码
- Android 手势密码分析
- Android手势密码
- Fox And Two Dots
- java-重载、重写、多态、super、this
- java基础之一注释
- sqoop export 问题
- OutOfMemoryError GC overhead limit exceeded
- ReactNative 设置手势密码
- linux上代码如何上传至git？
- 机器学习-->集成学习-->Adaboost
- 机器学习——随机森林算法randomForest——原理及python实现
- 《统计学习方法》笔记06：LR逻辑回归模型
- 画一个增加直线或者一个减少曲线（1210）
- 将一个字符串转换为任意进制
- leetcode(32). Longest Valid Parentheses
- WebView
