效果图
先看效果
车牌号输入.gif
验证码输入.gif
实现过程
在写这的过程中,想法很重要, 小讲一下实现过程, 这个是比较重要的
*> 1, 用一个textInput组件实现弹出键盘,重要的地方(将textInput组件设置成透明状态)
*> 2,在上面铺设一堆text组件(展示数据),
*> 3, 每次textinput组件监测到value的变化,去更新页面,将值赋给text组件显示
上述过程可以就可以实现验证码登录的效果
如果遇到需要自定义键盘的需求, 其实是一样的想法.只不过在弹出键盘的时候用动画弹出即可
下面贴出核心代码:
<TextInput
style={styles.intextInputStyle}
OnChangeText={(text) => {
this.setState({
textString: text,
});
}}
value={this.state.textString}
underlineColorAndroid="transparent"
maxLength={6}
keyboardType="numeric"
selectionColor="transparent"
/>
intextInputStyle: {
width:自定义,
height: 自定义,
fontSize: 25,
color: 'transparent',
},
上面是核心代码,因为没有准备出demo,所以有问题的同学或者不明白的地方,可以在评论里留言.
