React Native ile kullanıcı giriş ekranı oluşturmak için aşağıdaki adımları izleyebilirsiniz:
- Proje oluşturun: react-native init projeAdi komutu ile projenizi oluşturun.
- Gerekli kütüphaneleri yükleyin: React Navigation gibi bir navigasyon kütüphanesi kullanmanız önerilir.
- Kullanıcı giriş formunu oluşturun: Form componenti ile kullanıcı adı ve şifre alanlarını oluşturun.
- Form verilerini alın: onChangeText ve onSubmitEditing gibi metodlarla form verilerini alın ve state’de saklayın.
- Giriş işlemini gerçekleştirin: onSubmitEditing metodu ile giriş işlemini gerçekleştirin ve gerekli kontrolleri yapın.
- 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;