Implementación de una función de inicio de sesión simple en React Native (recomendado)

Introducción a React Native:

React Native combina las ventajas de las aplicaciones web y nativas, permitiendo desarrollar aplicaciones nativas para iOS y Android utilizando JavaScript. En JavaScript, React abstracta los componentes UI nativos del sistema operativo, reemplazando los elementos DOM para la renderización, entre otros.

React Native te permite construir experiencias de aplicaciones de primera categoría en plataformas locales utilizando una experiencia de desarrollo basada en JavaScript y React. React Native se enfoca en la eficiencia de desarrollo de plataformas que todos los desarrolladores están preocupados por - los desarrolladores solo necesitan aprender un lenguaje para escribir código de manera eficiente para cualquier plataforma. Facebook ha utilizado React Native en varios productos de aplicaciones y continuará invirtiendo en React Native.

Aprender React Native también tiene2meses, desde la página inicial hasta los eventos de clic, hasta la llamada a la API, prácticamente todo está aprendido, hoy se implementará una función de inicio de sesión simple.

Aquí hay algunos puntos que necesitan ser aclarados:

1、En React Native, el componente <TextInput> por defecto tiene una línea horizontal, si se desea quitar la línea horizontal debajo del cuadro de entrada, se debe especificar un underlineColorAndroid='transparent' para <TextInput>, de esta manera se puede quitar la línea horizontal debajo del cuadro de entrada;

2、El cuadro de entrada de contraseña necesita especificar las propiedades: secureTextEntry={true}

3、Para mostrar una imagen, es necesario especificar el ancho y la altura del etiqueta <Image>, y a diferencia de Android, <Image> no puede ajustar automáticamente el tamaño de la imagen, no hay nada similar a wrap_content en Android.

El código es el siguiente:

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 
import React, {Component} from 'react'; 
import { 
AppRegistry, 
StyleSheet, 
Text, 
Image, 
View, 
TextInput 
} from 'react-native'; 
class ReactDemo extends Component { 
render() { 
return ( 
<View style={styles.container}> 
<View style={styles.header}> 
<Text style={styles.headtitle}>Agregar cuenta</Text> 
</View> 
<View style={styles.marginTopview}>/> 
<View style={styles.inputview}> 
<TextInput underlineColorAndroid='transparent' estilo={styles.textinput} placeholder='número de QQ]}/número de teléfono/correo electrónico'/> 
<View estilo={styles.dividerview}> 
<Text estilo={styles.divider}></Text> 
</View> 
<TextInput underlineColorAndroid='transparent' estilo={styles.textinput} placeholder='contraseña' 
secureTextEntry={true}/> 
</View> 
<View estilo={styles.bottomview}> 
<View estilo={styles.buttonview}> 
<Text estilo={styles.logintext}>iniciar sesión</Text> 
</View> 
<View estilo={styles.bottombtnsview}> 
<View estilo={styles.bottomleftbtnview}> 
<Text estilo={styles.bottombtn}>¿no puede iniciar sesión?</Text> 
</View> 
<View estilo={styles.bottomrightbtnview}> 
<Text estilo={styles.bottombtn}>nuevo usuario</Text> 
</View> 
</View> 
</View> 
</View> 
); 
} 
} 
const styles = StyleSheet.create({ 
container: { 
flex: 1, 
fondoDeColor: '#FFFFFF' 
}, 
header: { 
height: 50 , 
backgroundColor: '#12B7F5', 
justifyContent: 'center', 
}, 
headtitle: { 
alineacion: 'center', 
fontSize: 20 , 
color: '#ffffff', 
}, 
avatarview: { 
height: 150 , 
fondoDeColor: '#ECEDF'1', 
justifyContent: 'center', 
}, 
avatarimage: { 
ancho: 100 , 
height: 100 , 
alineacion: 'center' 
}, 
marginTopview: { 
height: 15, 
fondoDeColor: '#F'7F7F9" 
}, 
inputview: { 
height: 100 , 
}, 
textinput: { 
flex: 1, 
fontSize: 16, 
}, 
dividerview: { 
flexDirection: 'row', 
}, 
divider: { 
flex: 1, 
height: 1, 
fondoDeColor: '#ECEDF'1" 
}, 
bottomview: { 
fondoDeColor: '#ECEDF'1', 
flex: 1, 
}, 
buttonview: { 
backgroundColor: '#1DBAF1', 
margin: 10, 
borderRadius: 6, 
justifyContent: 'center', 
alignItems: 'center', 
}, 
logintext: { 
fontSize: 17, 
color: '#FFFFFF', 
marginTop: 10, 
marginBottom: 10, 
}, 
emptyview: { 
flex: 1, 
}, 
bottombtnsview: { 
flexDirection: 'row', 
}, 
bottomleftbtnview: { 
flex: 1, 
height: 50 , 
paddingLeft: 10, 
alignItems: 'flex-start', 
justifyContent: 'center', 
}, 
bottomrightbtnview: { 
flex: 1, 
height: 50 , 
paddingRight: 10, 
alignItems: 'flex-end', 
justifyContent: 'center', 
}, 
bottombtn: { 
fontSize: 15, 
color: '#1DBAF1', 
} 
} 
});

AppRegistry.registerComponent('ReactDemo', () => ReactDemo);

Declaración: Lo mencionado anteriormente es lo que el editor ha presentado a los lectores sobre la implementación de la función de inicio de sesión en React Native, esperamos que sea útil para todos. Si tienen alguna pregunta, dejen un mensaje y el editor responderá a tiempo. También agradecemos mucho el apoyo de todos a la página web de呐喊教程！3Declaración: El contenido de este artículo se ha obtenido de la red, pertenece al propietario original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha realizado un procesamiento editorial manual y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#w proporcionando evidencia relevante, una vez que se verifique, este sitio eliminará inmediatamente el contenido sospechoso de infracción.