如何在文本輸入上自動對焦？

Question

我用文本輸入制作了應用程序。 我有帶有條形碼掃描儀的移動設備。 我正在嘗試通過 webservice 讀取條形碼並在服務器上寫入來制作應用程序。 主要問題是，我想自動聚焦於文本輸入，因為單擊、掃描、單擊文本框並再次掃描很無聊，...

我嘗試了所有方法，我也在 stackoverflow 上用谷歌搜索過，但沒有找到任何關於我的問題的幫助。 我也嘗試過一些圖書館這樣做，但也沒有幫助。

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

在我打開應用程序后，我登錄了......它讓我在這里......我掃描然后我將寫入數據庫。 我只需要，如果我掃描了一些東西，它會自動將我自動聚焦在同一個文本輸入上，以便再次掃描。 最好的方法應該是禁用鍵盤，但我也不知道該怎么做。 抱歉我的經驗不足，但我是 React 和移動應用程序的新手。

Answer 1

創建一個參考文獻您的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}
 />

然后掃描后，您可以通過調用關注輸入

this.refText.focus()

Answer 2

在這種情況下，您還可以使用blurOnSubmit={false} 。 即使在提交文本后，這也可以保持文本框的焦點。