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

Question

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

我尝试了所有内容，我也在Stackoverflow上搜索过，但我在问题上没有找到任何帮助。我也尝试了这样做的SOM库，但也没有帮助。

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

打开应用程序后，我将登录...它可以让我来到这里...我扫描，然后我将写入DB。我只需要，如果我扫描某些内容，它将自动自动对焦我在同一文本input上以再次扫描。最好的方法应该是禁用键盘，但我不知道该怎么做。对不起，我的经验很低，但我是React和移动应用程序的新手。

Answer 1

为您的textinput创建ref

 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}。即使在提交文本后，这也可以使文本框关注。