如何在文本输入上自动对焦？

Question

我用文本输入制作了应用程序。我有带有条形码扫描器的移动设备。我正在尝试通过 webservice 读取条形码并在服务器上写入来制作应用程序。主要问题是，我想在文本输入上自动对焦，因为单击、扫描、单击文本框并再次扫描很无聊，...

我什么都试过了，我还在 Whosebug 上用谷歌搜索，但没有找到解决我问题的任何帮助。我也试过一些图书馆这样做，但也没有帮助。

import React from 'react';
import { Keyboard, View, Text, TextInput, TouchableWithoutFeedback, StyleSheet, Alert } from 'react-native';
import AsyncStorage from '@react-native-community/async-storage';

export default class HomeScreen extends React.Component{

  constructor(props){
    super(props);
    this.state = {text: '', txt:'Naskenujte regál!', txtinp:'Čiarový kód regálu', regal:'-1'};
  }
  render(){
      return(
        <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
          <View style={{textAlign: 'center', backgroundColor: '#F5FCFF'}}>
            <Text style={styles.text}>{this.state.txt}</Text>
            <TextInput id='txt' style={styles.input}
              placeholder={this.state.txtinp}
              keyboardType="numeric"
              autoFocus={true}
              onChangeText={(text) => this._changed(text)}
              onSelectionChange={(event) => console.log(event.nativeEvent.selection)}
              value={this.state.text}
            />
          </View>
          </TouchableWithoutFeedback>
    );
  }  
  _changed = async(text) => {
    if(this.state.regal == '-1'){
      //GET REGL FROM WEBSERVICE
      //
      //
      //
      pozicia =6;
      this.setState({txt: 'Regál číslo ' + pozicia + '\nNaskenujte produkt', txtinp:'Čiarový kód produktu', regal:pozicia})

    } 
    else {
      //NACITANIE PRODUCTU Z WEBSERVICE
      //
      //
      //
      // 
      product = text
      productID = 10;

      Alert.alert(
        'Zapísanie regálu',
        'Skladové miesto ' + this.state.regal + ' je prázdne.\n\nChcete naň zapísať produkt:\n' + product + '?',
        [
          {text: 'Nie', onPress: () => this._cancel()},
          {text: 'Áno', onPress: () => this._writeToDB(this.state.regal, productID)},
        ],
        {cancelable: false},
      );
    }
  }
  _cancel = async() => {
    this.setState({text: '', txt:'Naskenujte regál!', txtinp:'Čiarový kód regálu', regal:'-1'})
  }

  _writeToDB = async(regal, productID) => {
    this._cancel();
    //WRITE TO DATABASE BY WEBSERVICE
    //
    //
    //
    //
    //
  }
}

const styles = StyleSheet.create({
  text: {
    marginTop:50,
    textAlign: 'center',
    fontSize:40,
    fontWeight:'bold',
    color:'#000000',
    marginTop:10,
    marginBottom:35
  },
  input: {
    marginTop: 15,
    marginLeft:35,
    marginRight:35,
    height:40,
    padding:5,
    fontSize:16,
    borderBottomWidth:1,
    borderBottomColor:'#f05555'
  },
});

打开应用程序后，我登录了……它让我来到这里……我扫描，然后我将写入数据库。我只需要，如果我扫描某些东西，它会自动将我聚焦在同一个文本输入上，以便再次扫描。最好的方法应该是禁用键盘，但我也不知道该怎么做。很抱歉我的经验不足，但我是反应和移动应用程序的新手。

Answer 1

为您的 TextInput

创建一个 Refs

 constructor(props){
   super(props);
   this.state = {text: '', txt:'Naskenujte regál!', txtinp:'Čiarový kód regálu', 
   regal:'-1'};
   this.refTextInput = React.createRef();
 }

 <TextInput id='txt' style={styles.input}
    ...
    ref={ref => this.refTextInput = ref}
 />

然后扫描后你可以通过调用聚焦到输入

this.refText.focus()

Answer 2

您也可以在这种情况下使用 blurOnSubmit={false}。即使在提交文本后，这也会使文本框保持焦点。

如何在文本输入上自动对焦？

How do I autofocus on textinput?

android

textinput

reactjs

react-native