React Native 中實現(xiàn)確認(rèn)碼組件示例詳解
更新時間：2022年08月08日 16:39:26 作者：todoit
這篇文章主要為大家介紹了React Native中實現(xiàn)確認(rèn)碼組件示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
正文
確認(rèn)碼控件也是一個較為常見的組件了，乍一看，貌似較難實現(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屬性，控制進(jìn)入頁面時是否自動彈出鍵盤。 - 設(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(''))
}
開源方案
GitHub 上這個庫實現(xiàn)了比較酷炫的效果。有需要的小伙伴可以使用。
這里有一個示例，供你參考。
以上就是React Native 中實現(xiàn)確認(rèn)碼組件示例詳解的詳細(xì)內(nèi)容，更多關(guān)于React Native確認(rèn)碼組件的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了React中key的作用，幫助大家更好的理解和學(xué)習(xí)使用React，感興趣的朋友可以了解下2021-04-04
React?Native實現(xiàn)Toast輕提示和loading效果
這篇文章主要介紹了React Native實現(xiàn)Toast輕提示和loading效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09
本文主要介紹了react hooks組件間的傳值方式(使用ts)，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
React實現(xiàn)一個支持動態(tài)插槽的Layout組件
這篇文章主要為大家詳細(xì)介紹了如何使用React實現(xiàn)一個支持動態(tài)注冊內(nèi)容的插槽組件,文中的示例代碼簡潔易懂,有需要的小伙伴可以了解一下2025-02-02
所謂的生命周期就是指某個事物從開始到結(jié)束的各個階段,本文主要介紹了淺談react新舊生命周期鉤子,具有一定的參考價值,感興趣的可以了解一下2023-12-12
這篇文章主要給大家介紹了關(guān)于React中如何引入Angular組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-08-08
react?Table準(zhǔn)備Spin?Empty?ConfigProvider組件實現(xiàn)
這篇文章主要為大家介紹了react?Table準(zhǔn)備Spin、Empty、ConfigProvider組件實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪<BR>2023-02-02
在單頁面里面，父子組件傳值是比較常見的，這篇文章主要介紹了React父子組件間的傳值的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家介紹了每天學(xué)習(xí)一個hooks?useMount，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
解析react?函數(shù)組件輸入卡頓問題?usecallback?react.memo
useMemo是一個react hook,我們可以使用它在組件中包裝函數(shù)?？梢允褂盟鼇泶_保該函數(shù)中的值僅在依賴項之一發(fā)生變化時才重新計算，這篇文章主要介紹了react?函數(shù)組件輸入卡頓問題?usecallback?react.memo,需要的朋友可以參考下2022-07-07