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!