React Native 中實(shí)現(xiàn)確認(rèn)碼組件示例詳解
更新時(shí)間：2022年08月08日 16:39:26 作者：todoit
這篇文章主要為大家介紹了React Native中實(shí)現(xiàn)確認(rèn)碼組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
確認(rèn)碼控件也是一個(gè)較為常見(jiàn)的組件了，乍一看，貌似較難實(shí)現(xiàn)，但實(shí)則主要是障眼法。
實(shí)現(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 用于彈出鍵盤(pán)，接收用戶(hù)輸入，在它上面使用絕對(duì)定位覆蓋了一個(gè)用于旁路顯示的 View[style=cover]。
這就是 CodeInput 的實(shí)現(xiàn)原理了。
需要注意以下幾個(gè)點(diǎn)：
- 設(shè)置
TextInput的autoFocus屬性，控制進(jìn)入頁(yè)面時(shí)是否自動(dòng)彈出鍵盤(pán)。 - 設(shè)置作為覆蓋物的
View[style=cover]的pointerEvents屬性為none，不接收觸屏事件。這樣當(dāng)用戶(hù)點(diǎn)擊該區(qū)域時(shí)，底下的TextInput會(huì)獲得焦點(diǎn)。 - 設(shè)置作為容器的
View[style=container]的高度，這個(gè)高度就是數(shù)字單元格的寬高。使用onLayout回調(diào)來(lái)獲得容器的高度，用來(lái)設(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是一個(gè)字符數(shù)組，用于存放數(shù)字單元格的文本內(nèi)容，它的長(zhǎng)度是固定的。它的內(nèi)容由用戶(hù)輸入的值拆分組成，如果長(zhǎng)度不夠，則填充空字符串""。
export default function CodeInput({ value, length = 4 }) {
const cells = value.split('').concat(Array(length - value.length).fill(''))
}
開(kāi)源方案
GitHub 上這個(gè)庫(kù)實(shí)現(xiàn)了比較酷炫的效果。有需要的小伙伴可以使用。
這里有一個(gè)示例，供你參考。
以上就是React Native 中實(shí)現(xiàn)確認(rèn)碼組件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React Native確認(rèn)碼組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React?Native實(shí)現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實(shí)現(xiàn)Toast輕提示和loading效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-11-11
React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)插槽的Layout組件
這篇文章主要為大家詳細(xì)介紹了如何使用React實(shí)現(xiàn)一個(gè)支持動(dòng)態(tài)注冊(cè)內(nèi)容的插槽組件,文中的示例代碼簡(jiǎn)潔易懂,有需要的小伙伴可以了解一下2025-02-02
所謂的生命周期就是指某個(gè)事物從開(kāi)始到結(jié)束的各個(gè)階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價(jià)值,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于React中如何引入Angular組件的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實(shí)現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-02-02
在單頁(yè)面里面，父子組件傳值是比較常見(jiàn)的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
每天學(xué)習(xí)一個(gè)hooks?useMount
這篇文章主要為大家介紹了每天學(xué)習(xí)一個(gè)hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
解析react?函數(shù)組件輸入卡頓問(wèn)題?usecallback?react.memo
useMemo是一個(gè)react hook,我們可以使用它在組件中包裝函數(shù)。可以使用它來(lái)確保該函數(shù)中的值僅在依賴(lài)項(xiàng)之一發(fā)生變化時(shí)才重新計(jì)算，這篇文章主要介紹了react?函數(shù)組件輸入卡頓問(wèn)題?usecallback?react.memo,需要的朋友可以參考下2022-07-07