Página de inicio de sesión en React Native en 4 simples pasos

Para crear un formulario de inicio de sesión en React Native, puedes seguir los siguientes pasos:

1. Crea un nuevo proyecto de React Native usando el comando 

npx react-native init MyApp en la línea de comandos.


2. Crea un nuevo archivo llamado LoginScreen.js en el directorio src/screens.


3. Agrega el siguiente código en el archivo LoginScreen.js para crear el formulario de inicio de sesión:

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


const LoginScreen = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');


const handleLogin = () => {
// Aquí puedes agregar la lógica para validar las credenciales de inicio de sesión
};


return (
<View style={styles.container}>
<TextInput
style={styles.input}
placeholder="Correo electrónico"
onChangeText={(text) => setEmail(text)}
value={email}
/>
<TextInput
style={styles.input}
placeholder="Contraseña"
secureTextEntry={true}
onChangeText={(text) => setPassword(text)}
value={password}
/>
<TouchableOpacity style={styles.button} onPress={handleLogin}>
<Text style={styles.buttonText}>Iniciar sesión</Text>
</TouchableOpacity>
</View>
);
};


const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
input: {
width: '80%',
height: 50,
padding: 10,
borderWidth: 1,
borderColor: '#ccc',
marginBottom: 10,
},
button: {
backgroundColor: 'blue',
padding: 10,
borderRadius: 5,
},
buttonText: {
color: '#fff',
fontWeight: 'bold',
},
});


export default LoginScreen;


4. Agrega la pantalla de inicio de sesión a tu archivo de rutas en src/navigation/AppNavigator.js.

import { createStackNavigator } from '@react-navigation/stack';

import LoginScreen from '../screens/LoginScreen';

const Stack = createStackNavigator();

const AppNavigator = () => {

  return (

    <Stack.Navigator>

      <Stack.Screen name="Login" component={LoginScreen} />

      {/* Agrega aquí más pantallas */}

    </Stack.Navigator>

  );

};

export default AppNavigator;

Con esto, ya tendrás un formulario de inicio de sesión básico en tu aplicación de React Native. Por supuesto, esto es solo un ejemplo y deberás agregar la lógica necesaria para validar las credenciales de inicio de sesión y llevar al usuario a la pantalla de inicio correspondiente.