如何在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}
          />

- jocoders

---

你能否实现4个文本字段，其中2个为不可编辑的，另外2个为可编辑的，并将它们绑定在一个视图中？ - Tejas

非常感谢您提供的好主意！我会尝试的！ - jocoders

Answer 1

我已创建了一个最小示例，完全复制了您的使用情况，而不使用任何第三方库。

代码

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>

Working Demo

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

- Tim

---

Tim非常感谢你提供的答案。但是，如果我需要在该字段中输入20个字符呢？ - jocoders

我认为它在用户界面上不够友好。 - Tejas

@Tejas 当然，这不是一个完美的解决方案，只是一个可行的示例。它提供了一个初步的想法，让操作者自己实现这样的事情。 - Tim

@jocoders，你需要用20替换我代码中的每个11。如果您能给我点赞/标记为已接受的答案，我将不胜感激。 - Tim

@jocoders 顺便说一下，你可以通过点击答案旁边的勾选图标（在投票计数器下方）来接受一个答案。通过接受答案，你还将获得额外的声望奖励。 - Tim

非常感谢提供信息，但我仍在等待更多决定。谢谢你，Tim。 - jocoders

Answer 2

对于预填充，您可以在构造函数中将硬编码掩码值分配给状态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) // [phone]
  console.log(extracted) // 1234567890
 }}
  mask={"+1 ([000]) [000] [00] [00]"}

/>

- Danish Sarwar

---

非常感谢，丹麦人。 - jocoders

Answer 3

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

import { TextInputMask } from '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}
            />

你只需要将属性类型设置为“custom”，并根据https://github.com/benhurott/react-native-masked-text库创建一个掩码，例如：

 const accountMask = '40899810999999999999',

- jocoders