Création d'un écran de connexion fluide et compatible avec le clavier dans React Native

Créer un écran de connexion bien optimisé dans React Native implique souvent de gérer les interactions au clavier pour éviter que les champs de saisie soient masqués par le clavier. Dans ce guide, nous verrons comment créer un écran de connexion compatible avec le clavier avec des ajustements animés, en tirant parti d'un crochet personnalisé pour gérer la hauteur de décalage du clavier. Nous ajouterons également une image d’en-tête et organiserons l’écran pour une mise en page esthétique et fonctionnelle.

Caractéristiques de cette implémentation :

1. Conscience du clavier : L'écran ajuste sa position en fonction de la hauteur du clavier.
2. Animation fluide : Transitions animées lorsque le clavier apparaît ou disparaît.
3. Hook personnalisé réutilisable : un hook useKeyboardOffsetHeight pour gérer la hauteur du clavier de manière dynamique.

---

1. Crochet personnalisé : useKeyboardOffsetHeight

Le hook personnalisé useKeyboardOffsetHeight écoute les événements d'affichage/masquage du clavier et renvoie la hauteur du clavier, ce qui est crucial pour animer les ajustements de disposition. Ce hook garantit également que la fonctionnalité fonctionne sur iOS et Android.

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. Composant principal : application

Le composant principal utilise le hook useKeyboardOffsetHeight personnalisé et l'API Animated pour gérer des transitions fluides pour le formulaire de connexion. Le formulaire comprend des champs d'e-mail et de mot de passe, un bouton de connexion et une image d'en-tête.

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;

---

Résumé

Cet écran de connexion compatible avec le clavier offre une expérience fluide et conviviale en :

• Utilisation d'un crochet personnalisé pour gérer dynamiquement la hauteur de décalage du clavier.
• Application d'animations pour garder le formulaire visible lorsque le clavier est actif.
• Structuration d'une mise en page visuellement attrayante avec un en-tête d'image, des champs de saisie bien stylisés et un bouton de connexion bien visible.

En utilisant cette approche, vous créez une interface utilisateur de saisie de texte raffinée et fonctionnelle, en particulier sur les appareils mobiles où l'espace sur l'écran et les interactions de l'utilisateur avec le clavier sont des considérations essentielles. Cette configuration peut être étendue avec davantage de champs de formulaire ou de fonctionnalités, fournissant ainsi une excellente base pour tout flux d'authentification React Native.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!