Nuestro primer código de React Native

  • Autor de la entrada:
  • Categoría de la entrada:React Native

import React, {Component} from ‘react’;
import { StyleSheet, Text, View, Image, Button, Alert, ImageBackground, TouchableOpacity, TextInput, ScrollView } from ‘react-native’;

class HolaMundo extends Component{

//aqui declaramos las funciones
login(){
Alert.alert(‘Hola carlos’)
}

render(){
return(
//Contenedor principal
<ImageBackground source={require(‘./assets/fondo.jpg’)} style={styles.container}>
<View style={styles.header}>

<View style={styles.headerLeft}>
<Image source={require(‘./assets/logo.png’)} style={styles.logo} />
</View>

<View style={styles.headerRight}>
<Button title=’Login’ onPress = {this.login} />
</View>

</View>


<View style={[styles.body, styles.negrita]}>
<TouchableOpacity>
<Text style={styles.textColor}>Hola Carlos a inteligencia futura</Text>
<TextInput placeholder=»Nombre de usuario» placeholderTextColor=»white» maxLength={28} style={{borderWidth:1, borderRightColor:’white’, padding: 5, marginTop: 10 }}></TextInput>
</TouchableOpacity>
</View>

<View style={styles.footer}>
<View style={[styles.flex,styles.footerLeft]}>
<Text style={styles.textColor}>Futura</Text>
</View>
<View style={[styles.flex,styles.footerCenter]}>
<Text style={styles.textColor}>Lo mejor</Text>
</View>
<View style={[styles.flex, styles.footerRight]}>
<Image source={require(‘./assets/logo.png’)} style={styles.logo} />
</View>
</View>
</ImageBackground>
//fin del contenedor principal

)
}
}

const styles = StyleSheet.create({
container:{
flex:1,
flexDirection:’column’,
backgroundColor:’green’
},
negrita:{
fontWeight:’bold’
},
textColor:{
color:’white’
},
header:{
flex: 0.5,
flexDirection:’row’,
marginTop: 30
},
headerLeft:{
flex: 1,
},
headerRight:{
flex: 0.3,
marginRight:10
},
body:{
flex: 1,
alignItems:’center’,
justifyContent:’center’
},
logo: {
width: 100,
height: 60,
borderRadius: 30,
resizeMode: ‘contain’
},
footer:{
flex: 1,
flexDirection:’row’
},
flex: {
flex:1
},
footerLeft:{
alignItems: ‘center’,
justifyContent:’center’
},
footerCenter:{
alignItems: ‘center’,
justifyContent:’center’
},
footerRight:{
alignItems:’flex-end’,
justifyContent:’center’
}
})

export default HolaMundo

Ahora si, a explicar cada cosa.

  1. importamos todos los componentes necesarios
    import React, {Component} from ‘react’;
    import { StyleSheet, Text, View, Image, Button, Alert, ImageBackground, TouchableOpacity, TextInput, ScrollView } from ‘react-native’;

Declaramos una clase de esta forma class HolaMundo extends Component{ }, observa que al final exportamos la clase con export default HolaMundo, dentro de la clase declaramos todos los métodos o funciones que podamos necesitar, en este caso login(){
Alert.alert(‘Hola carlos’)
 

ahora para llamar a este método que lo único que mostrara es una alerta, este método lo llamaremos cuando haga clic en un botón.

<Button title=’Login’ onPress = {this.login} />

 Entonces usamos el método onPress y le indicamos que función o método llamara, ImageBackground es un componente que usamos para aplicar un fondo y como la mayoría de los componentes va acompañado de los estilos para saber como se visualizaran.

Ahora veamos el <Image source={require(‘./assets/logo.png’)} style={styles.logo} /> el componente de imagen requiere de una propiedad source, donde indicamos en que carpeta se encuentra el recurso, en este caso una imagen PNG.

El componente TextInput nos permite tener un campo donde ingresar la información, estos son los mas importantes en este código, los espero en el próximo tutorial