Membina Skrin Log Masuk yang Lancar dan Sedar Papan Kekunci dalam React Native

Mencipta skrin log masuk yang dioptimumkan dengan baik dalam React Native selalunya melibatkan pengendalian interaksi papan kekunci untuk mengelakkan medan input disembunyikan oleh papan kekunci. Dalam panduan ini, kami akan membina skrin log masuk yang sedar papan kekunci dengan pelarasan animasi, memanfaatkan cangkuk tersuai untuk mengurus ketinggian mengimbangi papan kekunci. Kami juga akan menambah imej pengepala dan menyusun skrin untuk reka letak yang estetik dan berfungsi.

Ciri-ciri Pelaksanaan ini:

1. Kesedaran Papan Kekunci: Skrin melaraskan kedudukannya berdasarkan ketinggian papan kekunci.
2. Animasi Lancar: Peralihan animasi apabila papan kekunci muncul atau hilang.
3. Cangkuk Tersuai Boleh Digunakan Semula: Satu cangkuk useKeyboardOffsetHeight untuk mengurus ketinggian papan kekunci secara dinamik.

---

1. Cangkuk Tersuai: useKeyboardOffsetHeight

Kail tersuai useKeyboardOffsetHeight mendengar acara papan kekunci papar/sembunyikan dan mengembalikan ketinggian papan kekunci, yang penting untuk menghidupkan pelarasan reka letak. Cangkuk ini juga memastikan kefungsian berfungsi pada kedua-dua iOS dan 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. Komponen Utama: App

Komponen utama menggunakan cangkuk useKeyboardOffsetHeight tersuai dan API Animasi untuk mengurus peralihan yang lancar untuk borang log masuk. Borang ini termasuk medan e-mel dan kata laluan, butang log masuk dan imej pengepala.

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;

---

Ringkasan

Skrin log masuk yang sedar papan kekunci ini menyediakan pengalaman yang lancar dan mesra pengguna dengan:

• Menggunakan cangkuk tersuai untuk mengurus ketinggian mengimbangi papan kekunci secara dinamik.
• Menggunakan animasi untuk memastikan borang kelihatan apabila papan kekunci aktif.
• Menstrukturkan reka letak yang menarik secara visual dengan pengepala imej, medan input yang digayakan dengan baik dan butang log masuk yang menonjol.

Dengan menggunakan pendekatan ini, anda mencipta UI input teks yang digilap dan berfungsi, terutamanya pada peranti mudah alih yang ruang skrin dan interaksi pengguna dengan papan kekunci adalah pertimbangan kritikal. Persediaan ini boleh dikembangkan dengan lebih banyak medan bentuk atau ciri, memberikan asas yang bagus untuk mana-mana aliran pengesahan React Native.

Atas ialah kandungan terperinci Membina Skrin Log Masuk yang Lancar dan Sedar Papan Kekunci dalam React Native. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!