验证码以及车牌号输入框基于React-native

效果图

车牌号输入.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,所以有问题的同学或者不明白的地方,可以在评论里留言.