react-native
Accesorios

Introducción

¿Qué son los accesorios?

Los apoyos se utilizan para transferir datos del componente principal al secundario. Los apoyos son de solo lectura. El componente hijo solo puede obtener los accesorios pasados ​​de los padres utilizando this.props.keyName . Usando puntales uno puede hacer su componente reutilizable.

Uso de accesorios

Una vez finalizada la configuración. Copie el código siguiente a index.android.js o al archivo index.ios.js para usar los accesorios.

import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

class LotsOfGreetings extends Component {
  render() {
    return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

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

Usando puntales uno puede hacer su componente genérico. Por ejemplo, tienes un componente Button. Puede pasar diferentes apoyos a ese componente, de modo que uno pueda colocar ese botón en cualquier lugar en su vista.

_{fuente: Props-React Native}

PropTypes

El paquete prop-types permite agregar una verificación de tipo de tiempo de ejecución a su componente que garantice que los tipos de props pasados ​​al componente son correctos. Por ejemplo, si no pasa un name o una isYummy al componente debajo, se producirá un error en el modo de desarrollo. En el modo de producción no se realizan las comprobaciones del tipo de apoyo. La definición de propTypes puede hacer que su componente sea más fácil de leer y mantener.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { AppRegistry, Text, View } from 'react-native';

import styles from './styles.js';

class Recipe extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    isYummy: PropTypes.bool.isRequired
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>{this.props.name}</Text>
        {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
      </View>
    )
  }
}

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


// Using the component
<Recipe name="Pancakes" isYummy={true} />

PropTypes múltiples

También puede tener varios propTypes de propTypes para uno. Por ejemplo, los accesorios de nombre que estoy tomando también pueden ser un objeto, puedo escribirlo como.

static propTypes = {
  name: PropTypes.oneOfType([
      PropTypes.string,
      PropTypes.object
  ])
}

Accesorios para niños

También hay un accesorio especial llamado children , que no se transmite como

<Recipe children={something}/>

En su lugar, deberías hacer esto

<Recipe>
  <Text>Hello React Native</Text>
</Recipe>

entonces puedes hacer esto en el render de la receta:

return (
  <View style={styles.container}>
    {this.props.children}
    {this.props.isYummy ? <Text>THIS RECIPE IS YUMMY</Text> : null}
  </View>
)

Tendrá un componente <Text> en su Recipe dice: "¿ Hello React Native , Hello React Native ?

Y el propTipo de niños es

children: PropTypes.node

Props por defecto

defaultProps le permite establecer valores de prop predeterminados para su componente. En el ejemplo a continuación, si no pasa los accesorios de nombre, mostrará a John; de lo contrario, mostrará el valor pasado

class Example extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.name}</Text>
      </View>
    )
  }
}


Example.defaultProps = {
  name: 'John'
}