Erstellen eines reibungslosen Anmeldebildschirms mit Tastaturerkennung in React Native

Das Erstellen eines gut optimierten Anmeldebildschirms in React Native erfordert häufig die Handhabung von Tastaturinteraktionen, um zu vermeiden, dass Eingabefelder von der Tastatur verdeckt werden. In dieser Anleitung gehen wir Schritt für Schritt durch die Erstellung eines tastaturfähigen Anmeldebildschirms mit animierten Anpassungen und nutzen einen benutzerdefinierten Hook, um die Höhe des Tastaturversatzes zu verwalten. Wir fügen außerdem ein Headerbild hinzu und organisieren den Bildschirm für ein ästhetisch ansprechendes und funktionales Layout.

Merkmale dieser Implementierung:

1. Tastaturerkennung: Der Bildschirm passt seine Position basierend auf der Tastaturhöhe an.
2. Glatte Animation: Animierte Übergänge, wenn die Tastatur erscheint oder verschwindet.
3. Wiederverwendbarer benutzerdefinierter Hook: Ein useKeyboardOffsetHeight-Hook zur dynamischen Verwaltung der Tastaturhöhe.

---

1. Benutzerdefinierter Hook: useKeyboardOffsetHeight

Der benutzerdefinierte Hook useKeyboardOffsetHeight wartet auf Ereignisse zum Ein-/Ausblenden der Tastatur und gibt die Tastaturhöhe zurück, die für die Animation der Layoutanpassungen von entscheidender Bedeutung ist. Dieser Hook stellt außerdem sicher, dass die Funktionalität sowohl auf iOS als auch auf Android funktioniert.

import { useEffect, useState } from 'react';
import { Keyboard } from 'react-native';

export default function useKeyboardOffsetHeight() {
  const [keyboardOffsetHeight, setKeyboardOffsetHeight] = useState(0);

  useEffect(() => {
    const showListener = Keyboard.addListener('keyboardWillShow', (e) => {
      setKeyboardOffsetHeight(e.endCoordinates.height);
    });
    const hideListener = Keyboard.addListener('keyboardWillHide', () => {
      setKeyboardOffsetHeight(0);
    });

    const androidShowListener = Keyboard.addListener('keyboardDidShow', (e) => {
      setKeyboardOffsetHeight(e.endCoordinates.height);
    });
    const androidHideListener = Keyboard.addListener('keyboardDidHide', () => {
      setKeyboardOffsetHeight(0);
    });

    return () => {
      showListener.remove();
      hideListener.remove();
      androidShowListener.remove();
      androidHideListener.remove();
    };
  }, []);

  return keyboardOffsetHeight;
}

---

2. Hauptkomponente: App

Die Hauptkomponente verwendet den benutzerdefinierten useKeyboardOffsetHeight-Hook und die Animated API, um reibungslose Übergänge für das Anmeldeformular zu verwalten. Das Formular enthält E-Mail- und Passwortfelder, eine Anmeldeschaltfläche und ein Kopfzeilenbild.

import React, { useEffect, useRef, useState } from 'react';
import { Animated, Image, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native';
import useKeyboardOffsetHeight from './useKeyboardOffsetHeight';

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const keyboardOffsetHeight = useKeyboardOffsetHeight();
  const animatedValue = useRef(new Animated.Value(0)).current;

  const handleSignIn = () => {
    // Handle sign-in logic here
    console.log('Email:', email);
    console.log('Password:', password);
  };

  // Animate view based on keyboard height
  useEffect(() => {
    Animated.timing(animatedValue, {
      toValue: keyboardOffsetHeight ? -keyboardOffsetHeight * 0.5 : 0, // adjust "0.5" as per requirement to adjust scroll position
      duration: 500,
      useNativeDriver: true,
    }).start();
  }, [keyboardOffsetHeight]);

  return (
    <View style={styles.container}>
      <View style={{ flex: 1 }}>
        <Image
          source={{
            uri: 'https://cdn.shopaccino.com/igmguru/articles/Become-React-Native-Developer.png?v=496',
          }}
          style={styles.image}
          resizeMode="cover"
        />
      </View>
      <Animated.ScrollView
        bounces={false}
        keyboardShouldPersistTaps="handled"
        keyboardDismissMode="on-drag"
        style={{ transform: [{ translateY: animatedValue }] }}
        contentContainerStyle={styles.box}
      >
        <Text style={styles.title}>Sign In</Text>
        <TextInput
          style={styles.input}
          placeholder="Email"
          value={email}
          onChangeText={setEmail}
          keyboardType="email-address"
          autoCapitalize="none"
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          value={password}
          onChangeText={setPassword}
          secureTextEntry
        />
      </Animated.ScrollView>
      <TouchableOpacity style={styles.signInButton} onPress={handleSignIn}>
        <Text style={styles.buttonText}>Sign In</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  image: {
    flex: 1,
    borderRadius: 10,
  },
  box: {
    flex: 1,
    width: '100%',
    backgroundColor: 'lightblue',
    padding: 20,
    borderRadius: 10,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    height: 50,
    borderColor: '#ddd',
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 10,
    marginBottom: 15,
    fontSize: 16,
    backgroundColor: '#f9f9f9',
  },
  signInButton: {
    width: '100%',
    marginTop: 20,
    backgroundColor: '#4a90e2',
    borderRadius: 8,
    paddingVertical: 15,
    alignItems: 'center',
    marginBottom: 40,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

---

Zusammenfassung

Dieser tastaturbasierte Anmeldebildschirm bietet ein reibungsloses, benutzerfreundliches Erlebnis durch:

• Verwenden eines benutzerdefinierten Hooks, um die Tastaturversatzhöhe dynamisch zu verwalten.
• Anwenden von Animationen, um das Formular sichtbar zu halten, wenn die Tastatur aktiv ist.
• Strukturierung eines optisch ansprechenden Layouts mit einer Bildkopfzeile, gut gestalteten Eingabefeldern und einer auffälligen Anmeldeschaltfläche.

Mit diesem Ansatz erstellen Sie eine ausgefeilte und funktionale Benutzeroberfläche für die Texteingabe, insbesondere auf Mobilgeräten, bei denen der Platz auf dem Bildschirm und die Interaktion des Benutzers mit der Tastatur von entscheidender Bedeutung sind. Dieses Setup kann um weitere Formularfelder oder Funktionen erweitert werden und bietet eine hervorragende Grundlage für jeden React Native-Authentifizierungsablauf.

Das obige ist der detaillierte Inhalt vonErstellen eines reibungslosen Anmeldebildschirms mit Tastaturerkennung in React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!