image.png

思路

数据源默认passwords:['','','','','','']
两个View,一个蓝色的密码显示passwordView，一个TextInput，两个都是绝对定位
默认情况下，TextInput在上面，passwordView在下面
点击TextInput，弹出键盘，设置zIndex,TextInput在下面，passwordView在上面
监听onKeyPress方法，设置数据 passwords.splice(this.enterCount,1,event.nativeEvent.key)

⚠️监听onChangeText，输入过快会出现多个字符

粗略实现代码

 this.state = {
   textInputZindex:100,
   passwowrdViewZindex:99,
   passwords:['','','','','','']
 }



<View style={{marginTop:50,height:44}}>

  <View  style={{position:'absolute',zIndex:this.state.passwowrdViewZindex,width:'100%',height:44,flexDirection:'row'}}>

  {
    this.state.passwords.map((item,index)=>{
      return <Text style={{width:44,height:44,backgroundColor:'blue',marginRight:10,textAlign:'center',
        lineHeight:44,fontSize:30,color:'#fff',fontWeight:'bold'}}>
          {item}
        </Text>
    })
  }
  </View>

 <TextInput style={{position:'absolute',zIndex:this.state.textInputZindex,width:'100%',height:44}} 
   onKeyPress={(event)=>{
     console.log('event.nativeEvent.key===',event.nativeEvent.key);
     let temp = this.state.passwords
     if (event.nativeEvent.key == 'Backspace'){
       if (this.enterCount > 0){
         temp.splice(this.enterCount - 1,1,'')
         this.setState({
           passwords: temp
         })
         this.enterCount -= 1
       }
       return
     }
     if (this.enterCount <= 5){
       temp.splice(this.enterCount,1,event.nativeEvent.key)
       this.setState({
         passwords: temp
       })
       if (this.enterCount == 5){
         Keyboard.dismiss()
         return
       }
       this.enterCount += 1
     }else {
       Keyboard.dismiss()
     }
   }}
   value={''}
   onFocus={()=>{
     this.setState({
       textInputZindex:99,
       passwowrdViewZindex: 100,
       passwords:['','','','','','']
     })
     this.enterCount = 0
   }}
   onBlur={()=>{
     this.setState({
       textInputZindex:100,
       passwowrdViewZindex: 99
     })
   }} />

</View>