React Native Basit Giriş Ekranı

React Native ile kullanıcı giriş ekranı oluşturmak için aşağıdaki adımları izleyebilirsiniz:

1. Proje oluşturun: react-native init projeAdi komutu ile projenizi oluşturun.
2. Gerekli kütüphaneleri yükleyin: React Navigation gibi bir navigasyon kütüphanesi kullanmanız önerilir.
3. Kullanıcı giriş formunu oluşturun: Form componenti ile kullanıcı adı ve şifre alanlarını oluşturun.
4. Form verilerini alın: onChangeText ve onSubmitEditing gibi metodlarla form verilerini alın ve state’de saklayın.
5. Giriş işlemini gerçekleştirin: onSubmitEditing metodu ile giriş işlemini gerçekleştirin ve gerekli kontrolleri yapın.
6. Navigasyon yapın: Kullanıcı girişi başarılı ise navigasyon yapın ve kullanıcıya uygun bir sayfaya yönlendirin.

Bu adımlar sizlere genel bir fikir verecektir.

Bunların nasıl olacağına bakacak olursak aşağıdaki kod bloğunu inceleyebiliriz

import React, { Component } from "react";
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from "react-native";

class LoginScreen extends Component {
  state = {
    username: "",
    password: "",
  };

  handleLogin = () => {
    // Perform login logic here
    console.log(`Username: ${this.state.username} Password: ${this.state.password}`);
    this.props.navigation.navigate("Home");
  };

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Login Screen</Text>
        <TextInput
          style={styles.input}
          placeholder="Username"
          value={this.state.username}
          onChangeText={username => this.setState({ username })}
        />
        <TextInput
          style={styles.input}
          placeholder="Password"
          value={this.state.password}
          onChangeText={password => this.setState({ password })}
          secureTextEntry={true}
        />
        <TouchableOpacity style={styles.button} onPress={this.handleLogin}>
          <Text style={styles.buttonText}>Login</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 24,
    marginBottom: 16,
  },
  input: {
    width: "80%",
    height: 48,
    borderWidth: 1,
    borderColor: "#ddd",
    padding: 8,
    marginVertical: 8,
  },
  button: {
    width: "80%",
    height: 48,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "#3366FF",
    marginTop: 16,
  },
  buttonText: {
    color: "#fff",
    fontSize: 16,
  },
});

export default LoginScreen;