React Native에서 매끄러운 키보드 인식 로그인 화면 구축

React Native에서 잘 최적화된 로그인 화면을 만들려면 입력 필드가 키보드에 의해 숨겨지지 않도록 키보드 상호 작용을 처리해야 하는 경우가 많습니다. 이 가이드에서는 애니메이션 조정이 포함된 키보드 인식 로그인 화면을 구축하고 맞춤 후크를 활용하여 키보드 오프셋 높이를 관리하는 과정을 안내합니다. 또한 미적으로 보기 좋고 기능적인 레이아웃을 위해 헤더 이미지를 추가하고 화면을 구성하겠습니다.

이 구현의 특징:

1. 키보드 인식: 키보드 높이에 따라 화면 위치가 조정됩니다.
2. 부드러운 애니메이션: 키보드가 나타나거나 사라질 때 애니메이션 전환
3. 재사용 가능한 사용자 정의 후크: 키보드 높이를 동적으로 관리하는 useKeyboardOffsetHeight 후크

---

1. 사용자 정의 후크: useKeyboardOffsetHeight

사용자 정의 후크 useKeyboardOffsetHeight는 키보드 표시/숨기기 이벤트를 수신하고 레이아웃 조정 애니메이션에 중요한 키보드 높이를 반환합니다. 이 후크는 iOS와 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. 주요 구성 요소: 앱

주요 구성 요소는 사용자 정의 useKeyboardOffsetHeight 후크와 애니메이션 API를 사용하여 로그인 양식의 원활한 전환을 관리합니다. 양식에는 이메일 및 비밀번호 필드, 로그인 버튼, 헤더 이미지가 포함되어 있습니다.

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;

---

요약

이 키보드 인식 로그인 화면은 다음을 통해 원활하고 사용자 친화적인 환경을 제공합니다.

• 맞춤 후크를 사용하여 키보드 오프셋 높이를 동적으로 관리합니다.
• 애니메이션 적용 키보드가 활성화되어 있을 때 양식이 계속 표시되도록 합니다.
• 이미지 헤더, 스타일이 좋은 입력 필드, 눈에 띄는 로그인 버튼을 사용하여 시각적으로 매력적인 레이아웃을 구성합니다.

이 접근 방식을 사용하면 특히 화면 공간과 키보드와의 사용자 상호 작용이 중요한 고려 사항인 모바일 기기에서 세련되고 기능적인 텍스트 입력 UI를 만들 수 있습니다. 이 설정은 더 많은 양식 필드 또는 기능으로 확장되어 모든 React Native 인증 흐름에 대한 훌륭한 기반을 제공할 수 있습니다.

위 내용은 React Native에서 매끄러운 키보드 인식 로그인 화면 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!