如上图设计效果,是我们常见的需求效果,我的实现思路:
1. 默认验证码值为空,使用lodash库中的padEnd方法末尾补齐五位空格,
2. 我们通过split('')分割输入的字符串验证码为一个个数字的数组;
3. 遍历分割后的数组,渲染每一个输入格的组件;
4. 将TextInput组件和渲染好的五个输入格放在View的组件下包裹, TextInput组件可以尽可能小的显示;
5. 给渲染好的五个输入格添加点击事件,让TextInput键盘获取焦点。
具体实现代码我会附上我的代码,欢迎留言提供更好的解决方案。
https://github.com/aijason/react-native-verifyCodeInput
如果实用,记得给个star吧!