React Native 之 手勢密碼

手勢密碼效果圖

  • 屬性
    • message (string)
      展示給用戶的提示信息樊展。

    • status (string)
      狀態(tài)為:normalright or wrong,用來驗證手勢密碼是否準確是需要自己在 onEnd 事件中來判斷的植酥。

    • normalColor(string)
      使用此顏色呈現(xiàn)默認的圓形顏色鸟蟹。

    • rightColor(string)
      密碼正確時候的顏色。

    • wrongColor(string)
      密碼錯誤時候的顏色。

    • interval(number)
      圓圈重置的時間間隔荸恕。

    • allowCross(string)
      允許跨越圓圈角寸,默認為 false菩混。

    • onStart(function)
      當(dāng)用戶開始輸入的手勢密碼時觸發(fā)。

    • onEnd(function)
      當(dāng)用戶結(jié)束輸入手勢密碼時觸發(fā)扁藕。


  • 示例:

import {
    StyleSheet,
    View,
    Text,
    TextInput,
    Alert
} from "react-native";

import PasswordGesture from './gesturePassword/index'
let Password1 = '';

export default class GesturePassword extends BaseComponent {
    constructor(props) {
        super(props);
        this.state = {
            message: '請繪制解鎖圖案',
            status: 'normal',
            timeOut: 300,
        }
    }

    render() {
        const {state}=this.props.navigation;
        return (
            <View>
                <NavigationBar rightText="" rightClick={() => {
                }}>{state.params.gesturePawText}</NavigationBar>
                <PasswordGesture
                    ref='pg'
                    status={this.state.status}
                    message={this.state.message}
                    onStart={() => this.onStart()}
                    onEnd={(password) => this.onEnd(password)}
                    innerCircle={true}
                    outerCircle={true}
                    interval={this.state.timeOut}
                />
            </View>
        )
    }

    onEnd(password) {
        const {timeOut}=this.state;
        if (Password1 === '') {
            // The first password
            Password1 = password;
            if (timeOut) {
                this.time = setTimeout(() => {
                    this.setState({
                        status: 'normal',
                        message: '請再次繪制解鎖圖案',
                    });
                }, timeOut)
            }
        } else {
            // The second password
            if (password === Password1) {
                this.setState({
                    status: 'right',
                    message: '您的密碼是' + password,
                });

                Password1 = '';
            } else {
                this.setState({
                    status: 'wrong',
                    message: '密碼錯誤, 請再次輸入.',
                });
            }
        }
    }

    onStart() {
        if (Password1 === '') {
            this.setState({
                message: '請繪制解鎖圖案',
            });
        } else {
            this.setState({
                message: '請再次繪制解鎖圖案',
            });
        }
        if (this.state.timeOut) {
            clearTimeout(this.time);
        }
    }
}
  • 設(shè)置密碼


    設(shè)置手勢密碼效果圖
  • 以上代碼沒啥好說的墨吓,真正有意思的地方在于為了滿足我們自定義的場景(比如:手勢圖的頂部需要加個用戶頭像或者如圖中顯示的第一次設(shè)置密碼后顯示圖),而修改布局的時候纹磺,因為這個手勢圖的位置使用 position 的 absolute 來寫的:

    • 第一:圓圈的位置和線的坐標位置必須一一對應(yīng)(否則會出現(xiàn)錯位的現(xiàn)象)帖烘;
    • 更改樣式主要在于:const Top = isVertical ? (Height - Width) / 2.0 * 1.25 + 35 : 10const Radius = isVertical ? Width / 10 : Width / 25;
      以及circles.push({ isActive: false, x: p * (Radius * 2 + Margin) + Margin + Radius + 30, y: q * (Radius * 2 + Margin) + Margin + Radius + 60 });

  • 重置代碼模塊
重置手勢密碼效果圖

重置的流程:

流程圖
  • TIP:
    1、手勢密碼輸錯 5 次橄杨,不再監(jiān)聽滑動秘症。
    2照卦、設(shè)置時的提示樣式,只保留第一次滑動軌跡乡摹,重置后清空

(眼尖的同學(xué)可能看出了兩幅圖樣式不太一致役耕,因為第一幅圖還沒正式開發(fā) ... )

由于篇幅原因,具體想要知道整個效果圖的代碼或者有補充地方的可以加技術(shù)群:631730313


推薦鏈接
IT 界寄來的書信系列
IT 界寄來的段子系列
IT 界起來的書籍系列
搞笑我們是用心系列

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末聪廉,一起剝皮案震驚了整個濱河市瞬痘,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌板熊,老刑警劉巖框全,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異干签,居然都是意外死亡津辩,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門容劳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來喘沿,“玉大人,你說我怎么就攤上這事竭贩⊙劣。” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵留量,是天一觀的道長窄赋。 經(jīng)常有香客問我,道長肪获,這世上最難降的妖魔是什么寝凌? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮孝赫,結(jié)果婚禮上较木,老公的妹妹穿的比我還像新娘。我一直安慰自己青柄,他們只是感情好伐债,可當(dāng)我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著致开,像睡著了一般峰锁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上双戳,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天虹蒋,我揣著相機與錄音,去河邊找鬼。 笑死魄衅,一個胖子當(dāng)著我的面吹牛峭竣,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播晃虫,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼皆撩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了哲银?” 一聲冷哼從身側(cè)響起扛吞,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎荆责,沒想到半個月后滥比,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡草巡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年守呜,在試婚紗的時候發(fā)現(xiàn)自己被綠了型酥。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片山憨。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖弥喉,靈堂內(nèi)的尸體忽然破棺而出郁竟,到底是詐尸還是另有隱情,我是刑警寧澤由境,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布棚亩,位于F島的核電站,受9級特大地震影響虏杰,放射性物質(zhì)發(fā)生泄漏讥蟆。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一纺阔、第九天 我趴在偏房一處隱蔽的房頂上張望瘸彤。 院中可真熱鬧,春花似錦笛钝、人聲如沸质况。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽结榄。三九已至,卻和暖如春囤捻,著一層夾襖步出監(jiān)牢的瞬間臼朗,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留视哑,地道東北人老厌。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓,卻偏偏與公主長得像黎炉,于是被迫代替她去往敵國和親枝秤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內(nèi)容

  • width: 65%;border: 1px solid #ddd;outline: 1300px solid #...
    邵勝奧閱讀 4,833評論 0 1
  • 1慷嗜、通過CocoaPods安裝項目名稱項目信息 AFNetworking網(wǎng)絡(luò)請求組件 FMDB本地數(shù)據(jù)庫組件 SD...
    陽明先生_X自主閱讀 15,988評論 3 119
  • 持續(xù)更新中...... 一套企業(yè)級的 UI 設(shè)計語言和 React 實現(xiàn)淀弹。 https://mobile.ant....
    日不落000閱讀 5,726評論 0 35
  • 題目 合作創(chuàng)造美好 一準備和熱身活動 1入班布置場地,桌子分6組后,圍一大圈站好庆械。 2熱身拍手操 簡易拍拍操 1...
    語馨_f389閱讀 190評論 0 0
  • 男人僅用幾分鐘做了爸爸薇溃,女人卻要付出一生去做媽媽 男人做一頓早餐你會感激,女人卻一日三餐缭乘,餐餐不誤 男人下班床上休...
    wnnhtpkbxp閱讀 193評論 0 1