javascript - 如何在 React Native 应用程序中预填充 TextInput？

Question

我的 React Native 应用程序中有一个 TextInput 组件。我需要使该字段预先填充有 408xx810xxx、1-3 和 6-8 位数字的掩码，禁止将其更改给用户。有人可以推荐最好的方法吗？

          <TextInput
            style={[SS.input, styles.input]}
            placeholder={props.placeholder} placeholderTextColor={theme.inputPlaceholder}
            underlineColorAndroid='transparent' editable={!props.disabled}
            keyboardType={props.keyboardType || 'default'} autoCapitalize={capitalize}
            keyboardAppearance={props.keyboardAppearance}
            autoCorrect={autoCorrect} selection={state.position}
            secureTextEntry={this.state.guarded}
            value={this.state.value}
            onChangeText={this._onChangeText}
            onFocus={this._onFocus} onBlur={this._onBlur}
            autoFocus={props.autoFocus}
            multiline={props.multiline}
            maxLength={props.maxLength}
            onContentSizeChange={onContentSizeChange}
          />

Answer 1

我创建了一个最小的示例，它完全重新创建了您的用例，而不使用任何第三方库。
代码
更改文本:

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