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

Question

I made app with textinput. I have mobil device with included barcode scanner. I'm trying to make app with reading barcodes and writing on the server by webservice. The main problem is, that i want to autofocus on textinput, cause it's boring doing Click, Scan, Click on text box and scan again,...

I tried everything, i googled also here on stackoverflow and i didn't found any help with my problem. I tried also som libraries doing this, but also, not helpful.

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'
  },
});

After I open app I have login ... it gets me here... I scan and then i will make writing in to DB. I just need, that If I scann something, it will automaticly autofocus me on the same textinput in order to scan again. The best way should be with disabling keyboard, but I don't know also how to do it. Sorry for my low experiences, but I'm new in react and mobile apps.

Answer 1

create a Refs to your TextInput

 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}
 />

then after scan you can focus to the input by call

this.refText.focus()

Answer 2

You can also use blurOnSubmit={false} in this case. This keeps the textbox focused even after the text is submitted.