如何在 React Native 中创建引导式用户输入？

Question

我想使用 React Native 创建引导式输入的用户体验。我的意思是：

用户按下 TextInput 组件来搜索内容。 value 和 placeholder 会自动填充前缀 "ABCDE-"
用户显示 "numeric" keyboardType。在他们输入四个数字后，另一个“-”会自动添加到搜索值中，例如："ABCDE-1234-"
用户再输入四个数字，最终搜索值如下所示："ABCDE-1234-5678"

我对这种体验感到好奇的两个方面是在 onPress 时填充前缀 "ABCDE-"，以及在键入 n 数字后添加第二个破折号.

在同一搜索中在字母表、备用字符和数字之间切换非常笨拙和繁琐，可以通过这种方式简化。

Answer 1

我做了一个简单的示例代码，你可以试试看，改成你想要的：

import React, { Component } from "react";
import {TextInput } from "react-native";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  onChangeTextHandler(text){
    var len = text.length;
    if ((len===5 || len===10)&& len>=this.state.text.length){
      text = text +"-"
    }
    if(text.length!==16){
      this.setState({text:text})
    }    
  }
  render() {
    return (
      <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1,marginTop:20}}
      onChangeText={(text) => this.onChangeTextHandler(text)}
      value={this.state.text}
      placeholder="ABCDE-1234-5678"
    />
    );
  }
}

export default App;

Test Link

Answer 2

对于 点 1 你可以像这样使用 onFocus TextInput 的道具

<TextInput
   value={this.state.searchTerm}
   style={/* your style*/}
   onFocus={()=>{
    if(this.state.searchTerm==""){
     this.setState({searchTerm:"ABCDE-"})
    }
  }}
/>

对于 点 2 使用 keyboardType 和 onChangeText TextInput 的道具，像这样

<TextInput
   value={this.state.searchTerm}
   style={/* your style*/}
   keyboardType={"numeric"}
   onChangeText={(text)=>{
     /*since there 6 characters placed on focus so n character login will be*/

    if(this.state.searchTerm.length>6){         
        if(value.length%5==0){
          let temp = this.state.searchTerm+"-"+text[text.length-1]
          onChangeText(temp)
        } else {
          onChangeText(text)
        }
     }else{
      onChangeText(text)
     }
   }}
   onFocus={()=> {
    if(this.state.searchTerm==""){
      this.setState({searchTerm:"ABCDE-"})
    }
  }}
/>

希望您能从这段代码中了解如何实现引导式用户输入

如何在 React Native 中创建引导式用户输入？

How to create guided user input in React Native?

javascript

user-interface

user-experience

react-native