react-native - 聚焦功能组件中的下一个输入字段反应原生

Question

我创建了一个登录页面，其中有 2 个输入字段（用户名、密码）。为了生成这些输入字段，我正在使用 nativebase 中的“输入”组件。现在，当用户从键盘按下下一步时，我想从用户名输入字段中聚焦密码字段。但是我很难找到这个解决方案，有人可以帮我解决这个问题吗？这是我的代码：

//packages
import React, { createRef, useContext, useEffect, useState } from 'react';
import { Image, Keyboard, ScrollView, StyleSheet, Text, View } from 'react-native';
import { AuthContext } from './context';


// third pirty packages
import { Button, Item, Input, Root, Spinner } from 'native-base';
import FontAwesome from "react-native-vector-icons/FontAwesome";
import Feather from "react-native-vector-icons/Feather";
import {
  widthPercentageToDP as wp,
  heightPercentageToDP as hp,
  listenOrientationChange as lor,
  removeOrientationListener as rol
} from 'react-native-responsive-screen';


//assets and components
import logoImageSmall from './../android/app/src/main/res/drawable/logo_small.png';


export const LoginScreen = ({ route, navigation }) => {

  const [site_url, setSiteUrl] = useState(route.params.site_url);
  const [database_name, setDatabaseName] = useState(route.params.database_name);
  const [institute_name, setInstituteName] = useState(route.params.institute_name);
  const [logo_location, setLogoLocation] = useState(route.params.logo_location);
  const [student_id, setStudentId] = useState('');
  const [password, setPassword] = useState('');
  const [showLogo, setShowLogo] = useState(true);

  const { state, signInAction } = useContext(AuthContext);
  let passwordRef = React.createRef();

  useEffect(() => {
    lor();

    const keyboardDidShowListener = Keyboard.addListener(
      'keyboardDidShow',
      () => {
        _keyboardDidShow();
      }
    );
    const keyboardDidHideListener = Keyboard.addListener(
      'keyboardDidHide',
      () => {
        _keyboardDidHide();
      }
    );

    return () => {
      rol();

      keyboardDidHideListener.remove();
      keyboardDidShowListener.remove();
    };
  }, []);

  let _keyboardDidHide = () => {
    setShowLogo(true);
  }

  let _keyboardDidShow = () => {
    setShowLogo(false);
  }

  const styles = StyleSheet.create({
        ............
    // my styles
        ............
  });

  return (
    <Root>
      <ScrollView contentContainerStyle={styles.loginForm} keyboardShouldPersistTaps="handled">
        <Item rounded style={{ borderColor: "#FF3C48" }}>
          <FontAwesome name='user' style={styles.iconStyle} />

          <Input
            style={{ marginLeft: hp("3%") }}
            placeholder='Username'
            onChangeText={student_id => setStudentId(student_id)}
            returnKeyType={"next"}
            blurOnSubmit={false}
            onSubmitEditing={el => passwordRef.current = el}
            onFocus={() => setShowLogo(false)} />
        </Item>

        <Item rounded style={{ borderColor: "#FF3C48", marginTop: hp("3%") }}>
          <FontAwesome name='unlock' style={styles.iconStyle} />

          <Input
            ref={passwordRef}
            style={{ marginLeft: hp("3%") }}
            secureTextEntry={true}
            placeholder='Password'
            onChangeText={password => setPassword(password)}
            returnKeyType={"done"}
            onFocus={() => setShowLogo(false)} />
        </Item>

        <Button full danger
          style={{ marginTop: hp("3%") }}
          onPress={() => {
            // check App.js for further process
            signInAction({ student_id, password, site_url, database_name });
          }}>
          {state.sendingRequest ? (<Spinner color='white' />) : (<Text style={{ color: '#ffffff', fontWeight: 'bold', width: '100%', textAlign: 'center', fontSize: hp("2.8%") }}> LOGIN </Text>)}
        </Button>

      </ScrollView>
    </Root>
  )
}

标签： react-nativenative-base