首页 > 解决方案 > 键盘没有熬夜(每个键后失去焦点)-TextInput

问题描述

在下面你能看到我的代码吗,现在这个代码是一个更大的项目的一部分,但我想知道你们是否能看到任何使它失去焦点的东西,或者你是否有机会告诉我我可以这样做,让键盘保持向上

import React, {Component, useState,useEffect } from 'react';
import {Button,SafeAreaView,StyleSheet, View, TextInput, Text} from 'react-native';
import {
  Onfido,
  OnfidoCaptureType,
  OnfidoCountryCode,
  OnfidoDocumentType,
} from '@onfido/react-native-sdk';
import {createApplicant, createCheck, createSdk} from '../../services/callToBackend';
import CountrySelectDropdown from '../../services/CountrySelector/countrySelectDropDown';
import getCountryISO3 from "country-iso-2-to-3";
import { withNavigation } from 'react-navigation';


const styles = StyleSheet.create({
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

const OnFidoSDK = ({navigation}) => {
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [countryCode, setCountryCode] = useState('ISL');
  const [applicantId, setApplicantId] = useState('');
  const [sdkToken, setSDKtoken] = useState('');


  
  const CountrySelection = () => {
    //const [countrycode, setCountryCode] = React.useState(null);

    //useEffect(() => {
    //  setCountry(getCountryISO3(countrycode))
    //},[country]) ;
    return (
      <SafeAreaView>
        <Text style={{padding:10}}>Select country of issuance</Text>
        <CountrySelectDropdown
          countrySelect={setCountryCode}
          error={"errorMsg"}
          fontFamily={"Nunito-Regular"}
          textColor={"#0a0a0a"}
          //defaultCountry={"IS"}
          />
          
          
      </SafeAreaView>
    )
  }

  


  const UselessTextInput = () => {
    //const [firstname, onChangeFirst] = React.useState(null);
    //const [lastname, onChangeLast] = React.useState(null);

    
    
    /*useEffect(() => {
      setFirstName(firstName);
    },[firstName]);
    useEffect(() => {
      setLastName(lastName);
    },[lastName]); */
  
    //TO-DO - TextInput looses focus after each keystroke
    return (
      
      <SafeAreaView>
        
        <TextInput
          
          style={styles.input}
          value={firstName}
          
          //autoFocus={true} autofocus might work if we split the input into two functions
          onChangeText={setFirstName}
          placeholder="First name"
        />
        <TextInput
          
          style={styles.input}
          value={lastName}
          
          onChangeText={setLastName}
          
          placeholder="Last name"
        />

      </SafeAreaView>
    );
  };

  const _createApplicant = async () => {
    const result = await createApplicant(firstName,lastName)
    return result
  }

  const getToken = async (applicant_id:string) => {
    console.log("Firstname + lastname --->  "+firstName+"  "+lastName)
    
    //const result = await createApplicant(firstName,lastName)
    
    const sdkTokenResponse = await createSdk(applicant_id,"com.sampleapp");
    setSDKtoken(sdkTokenResponse);
    return sdkTokenResponse;
  }

  const startSDK = async () =>  {
    //const [id, setID] = useState('');
    const applicant_id = await _createApplicant();
    console.log("appliccant_id: "+applicant_id)
    console.log("country: "+countryCode);
    Onfido.start({
      sdkToken: await getToken(applicant_id),
      flowSteps: {
        welcome: true,
        captureFace: {
          type: OnfidoCaptureType.PHOTO,
        },
        captureDocument: {
          docType: OnfidoDocumentType.DRIVING_LICENCE,
          countryCode: getCountryISO3(countryCode),
        },
      },
    })
      .then(res => navigation.navigate('Screen2',applicant_id))
      .catch(err => console.warn('OnfidoSDK: Error:', err.code, err.message));
  }

    
    
  
    return (
      <View style={{marginTop: 100,padding: 20}}>
        <UselessTextInput/>
        <CountrySelection/>
        <View style={{marginTop: 100,padding: 20}}></View>
        <Button title="Start Onfido SDK" onPress={async () => await startSDK()} />
      </View>
      
    );
  
}

export default withNavigation(OnFidoSDK);

我需要做任何更改的地方在第 75-92 行附近,在那里我收到了用户的名字和姓氏。

感谢您为我提供的任何帮助!

标签: typescriptreact-nativeinput

解决方案


推荐阅读