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