您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“React Native中如何實現(xiàn)確認碼組件”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學(xué)習(xí)“React Native中如何實現(xiàn)確認碼組件”吧!
確認碼控件也是一個較為常見的組件了,乍一看,貌似較難實現(xiàn),但實則主要是障眼法。
上圖 CodeInput
組件的 UI 結(jié)構(gòu)如下:
<View style={[styles.container]}> <TextInput autoFocus={true} /> <View style={[styles.cover, StyleSheet.absoluteFillObject]} pointerEvents="none"> {cells.map((value: string, index: number) => ( <View style={[styles.cell]}> <Text style={styles.text}>{value}</Text> </View> ))} </View> </View>
TextInput
用于彈出鍵盤,接收用戶輸入,在它上面使用絕對定位覆蓋了一個用于旁路顯示的 View[style=cover]
。
這就是 CodeInput
的實現(xiàn)原理了。
需要注意以下幾個點:
設(shè)置 TextInput
的 autoFocus
屬性,控制進入頁面時是否自動彈出鍵盤。
設(shè)置作為覆蓋物的 View[style=cover]
的 pointerEvents
屬性為 none
,不接收觸屏事件。這樣當(dāng)用戶點擊該區(qū)域時,底下的 TextInput
會獲得焦點。
設(shè)置作為容器的 View[style=container]
的高度,這個高度就是數(shù)字單元格的寬高。使用 onLayout
回調(diào)來獲得容器的高度,用來設(shè)置數(shù)字單元格的寬高。
const { onLayout, height } = useLayout() const size = height return ( <View style={[styles.container, style]} onLayout={onLayout}> <TextInput /> <View style={[styles.cover, StyleSheet.absoluteFillObject]}> {cells.map((value: string, index: number) => ( <View style={[ styles.cell, { width: size, height: size, marginLeft: index === 0 ? 0 : spacing } ]}> <Text style={styles.text}>{value}</Text> </View> ))} </View> </View> )
cells
是一個字符數(shù)組,用于存放數(shù)字單元格的文本內(nèi)容,它的長度是固定的。它的內(nèi)容由用戶輸入的值拆分組成,如果長度不夠,則填充空字符串 ""
。
export default function CodeInput({ value, length = 4 }) { const cells = value.split('').concat(Array(length - value.length).fill('')) }
到此,相信大家對“React Native中如何實現(xiàn)確認碼組件”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。