我创建了一个最小的示例，该示例可以完全重新创建您的用例，而无需使用任何第三方库。

代码

changeText：

changeText(text){
// we do not allow the deletion of any character
if (text.length >= 11){
  var tmp = text.split("")
  // check if there are still is a X value in string 
  const currentIndex = text.indexOf('X');
  if (currentIndex) {
    //if a X was found,replace it with the newest character
    tmp[currentIndex] = tmp[11];
    //remove latest character again
    tmp.pop();
  }
  this.setState({value: tmp.join("")})
  }
}

渲染：

  <View style={styles.container}>
     <TextInput
      value={this.state.value}
      onChangeText={(text) => this.changeText(text)}
     />
  </View>

工作演示

https://snack.expo.io/Sym-2W8RH

对于预填充，您可以在构造函数中将硬编码的掩码值分配给状态this.state.value。

对于屏蔽，我建议您使用此库：

  

https://github.com/react-native-community/react-native-text-input-mask

使用此库遮罩可进行类似的操作

<TextInputMask
  refInput={ref => { this.input = ref }}
  onChangeText={(formatted,extracted) => {
  console.log(formatted) // +1 (123) 456-78-90
  console.log(extracted) // 1234567890
 }}
  mask={"+1 ([000]) [000] [00] [00]"}

/>

我发现使用react-native-masked-text库的最佳决定：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="300"></canvas>

<small> select all circles and hit the button </small>
<br>
<br>
<button id="distribute">  distribute </button>

import { TextInputMask } from 'react-native-masked-text';

您只需要将属性类型设置为“ custom”，并根据https://github.com/benhurott/react-native-masked-text库创建一个掩码，就我而言，就是这样：

            <TextInputMask
              type='custom' 
              options={{mask: accountMask}} 
              maxLength={20}
              customTextInput={InputText} 
              customTextInputProps={this._loginMaskProps}
              value={vm.checkingAccount} keyboardType={'number-pad'}
              placeholder={accountPlaceholder} 
              onChangeText={vm.changeCheckingAccount}
            />