React Native의 로그인 페이지 UI

다음은 React Native의 로그인 페이지 UI 예시입니다.

 

import React, { useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    // Perform login logic here
  }

  return (
    <View style={styles.container}>
      <Text style={styles.label}>Username</Text>
      <TextInput
        style={styles.input}
        onChangeText={text => setUsername(text)}
        value={username}
      />
      <Text style={styles.label}>Password</Text>
      <TextInput
        style={styles.input}
        onChangeText={text => setPassword(text)}
        value={password}
        secureTextEntry={true}
      />
      <TouchableOpacity style={styles.button} onPress={handleLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20
  },
  label: {
    fontSize: 18,
    marginBottom: 10
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 20,
    width: '100%'
  },
  button: {
    backgroundColor: '#4CAF50',
    padding: 15,
    width: '100%'
  },
  buttonText: {
    color: '#fff',
    textAlign: 'center',
    fontWeight: 'bold'
  }
});

export default LoginPage;

이 예에서는 useState 후크를 사용하여 두 개의 상태 변수를 생성합니다. 로그인 버튼을 눌렀을 때 호출되는 handleLogin 함수도 있습니다. 이 기능은 사용자의 자격 증명을 인증하기 위해 네트워크 요청을 만드는 것과 같이 사용자 로그인을 위한 논리를 배치하는 곳입니다.

UI는 컨테이너 보기, 사용자 이름 및 암호에 대한 두 개의 텍스트 입력 및 로그인 버튼으로 구성됩니다. 텍스트 입력은 onChangeText 소품을 사용하여 해당 상태 변수를 업데이트하고 로그인 버튼은 onPress 소품을 사용하여 handleLogin 함수를 호출합니다.

이는 기본적인 예일 뿐이며 프로덕션 앱의 경우 사용자 데이터 암호화 및 다양한 경우의 오류 처리와 같은 추가 보안 문제를 처리해야 합니다. 또한 비밀번호 분실 또는 가입과 같은 추가 기능을 구현해야 합니다.