Tips React Native

tipsReactNativeForMe.md

Tips React Native

Este es un Gist propio donde puedo meter la pata

💭 Comentarios

Para añadir comentarios entre el código sólo hay que añadir {/* */}. Vamos a verlo con un ejemplo:

    <View style={styles.container}>
        <Button title="Ir atrás a pantalla de logueo" onPress={()=> this.props.navigation.goBack()} />

        {/* Go to the Top of the Stack Navigator */}
        <Button title="Ir atrás a pantalla de logueo" onPress={()=> this.props.navigation.popToTop()} />
    </View>

✏️ Styles

Podemos definir los estilos de diferente manera:

👉 Dándole directamente los estilos al Componente

<Text style={{color: 'red'}}>Texto Ejemplo</Text>

👉 Definiendolo desde el StyleSheet y añadiendo otros propios

<Text style={[styles.EstiloPropio, {color: 'blue'}]}>Texto Ejemplo</Text>

👉 Escribiendolo al StyleSheet

<Text style={styles.EstiliPropio}>Texto Ejemplo</Text>

🚗 Navigation

Aquí van unas tips sobre Navigation: :point_right: Volver a la misma página

Si queremos volver a la misma página a través de un botón debemos de hacer esto:

//Forma incorrecta (con error)
<Button title="Ir a la Pantalla de Inicio"
    onPress={() => this.props.navigation.navigation('Login')}     
/>

//Forma correcta
<Button title="Ir a la Pantalla de Inicio"
    onPress={() => this.props.navigation.navigation('Login')}     
/>

🎢 Flex

Para poder posicionar los elementos en la aplciación utilizaremos elementos Flex.

👉 Dividir la pantalla en dos

A continuación pondremos un fondo de color naranja y después dos elementos uno de color azul (arriba) y otro elemento de color rosa (abajo). Veamos el código:

      <View style={{flex: 1, backgroundColor: 'orange'}}>
        <View style={{flex: 1, backgroundColor: 'blue'}}></View>

        <View style={{flex: 1, backgroundColor: 'pink'}}></View>
      </View>

Si queremos darle más cantidad de pantalla a uno sólo tenemos que cambiar el elemento flex por ejemplo darle un flex: 4.

👉 flexDirection

Esto se debe de poner el View padre para que afecte a los hijos. Por defecto el flexDirection está puesto en column que parte los elementos horizontalmente, pero si se lo queremos añadir sería de la siguiente manera:

      <View style={{flex: 1, backgroundColor: 'orange', flexDirection: 'column'}}>
        <View style={{flex: 1, backgroundColor: 'blue'}}></View>

        <View style={{flex: 1, backgroundColor: 'pink'}}></View>
      </View>

Si queremos que nuestroe elementos se organicen en vertical sería de la siguiente manera:

      <View style={{flex: 1, backgroundColor: 'orange', flexDirection: 'row'}}>
        <View style={{flex: 1, backgroundColor: 'blue'}}></View>

        <View style={{flex: 1, backgroundColor: 'pink'}}></View>
      </View>

👉 Alineamiento horizontal, vertical y centrado de un elemento

Podemos alinear verticalmente y horizontalmente un elemento. Si mezclamos mas dos podemos centrarlo. También veremos como llevar el elemnto a la izquierda, a la derecha y arriba o abajo.

🎓 Verticalmente

Para alinear verticalmente useramos 'justifyContent' en el elemento padre para que haga efecto al hijo:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.elemento1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
    justifyContent: 'center'
  },
  textColor: {
    color: 'red'
  },
  elemento1: {
    height: 50,
    width: 50,
    backgroundColor: 'blue'
  },
});

🎓 Horizontalmente

Para alinear horizontalmente useramos alignItems en el elemento padre para que haga efecto al hijo:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.elemento1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
    alignItems: 'center'
  },
  textColor: {
    color: 'red'
  },
  elemento1: {
    height: 50,
    width: 50,
    backgroundColor: 'blue'
  },
});

🎓 Centrar

Para alinear al centro useramos justifyContent y alignItems en el elemento padre para que haga efecto al hijo:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.elemento1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
    alignItems: 'center',
    justifyContent: 'center'
  },
  textColor: {
    color: 'red'
  },
  elemento1: {
    height: 50,
    width: 50,
    backgroundColor: 'blue'
  },
});

🎓 Mover el elemento

Para mover el elemento useramos el ya conocido center pero también tendremos flex-start y flex-end que los utilizaremos en justifyContent y alignItems. Vamos a mostrar un elemento para que se vaya arriba y a la derecha del todo:

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.elemento1}></View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'orange',
    alignItems: 'flex-end',
    justifyContent: 'flex-start'
  },
  textColor: {
    color: 'red'
  },
  elemento1: {
    height: 50,
    width: 50,
    backgroundColor: 'blue'
  },
});

🚸 Herencia entre Componentes

Los elementos se heredan de padre a hijos. Esto es muy importante para hacer un árbol de componentes y ver quien puede heredar.

💥 Darle más de una propiedad a un elemento

Aquí pondré un ejemplo de un carrito de la compra donde ya de por sí suma un elemento al darle al botón, pero queremos que en vez de uno sume dos sobrecargando el this.

👉 Darle más de un valor a un this

Tenemos el siguiente estado:

  constructor() {
    super();
    
    this.state = {
      productCount: 0
    }
  }
  
addProduct = () => {
  this.setState({'productCount': this.state.productCount + 1});
}

Si pusieramos lo siguiente a addProduct no haría nada, sólo sumaría uno, no dos:

addProduct = () => {
  this.setState({'productCount': this.state.productCount + 1});
  //Aunque repitieramos la línea no haría nada
  this.setState({'productCount': this.state.productCount + 1});
}

Tenemos dos maneras para solucionar esto:

1️⃣ Primera manera

Es la forma correcta de utilizarlo, es utilizando un prevState, veamos el ejemplo:

addProduct = () => {
  this.setState({'productCount': this.state.productCount + 1});
  //Aquí ya si que sumaría
  this.setState((prevState) => ({'productCount': prevState.productCount+1}));
}

2️⃣ Segunda manera

La segunda manera también es correcta pero es mejor usar la que hemos mencionado anteriormente:

addProduct = () => {
  this.setState({'productCount': this.state.productCount + 1}, () => {
    this.setState({'productCount': this.state.productCount + 1})
})

Alert

Como añadir un alert típico de JavaScript en React Native para móviles, con un ejemplo de un botón:

<Button title="Add Product" 
  onPress={() => alert("Texto de la alerta")}
/>