react-native
Les accessoires

Introduction

Quels sont les accessoires?

Les accessoires permettent de transférer des données d'un composant parent à un composant enfant. Les accessoires sont en lecture seule. Le composant enfant peut uniquement obtenir les propriétés transmises par le parent en utilisant this.props.keyName . En utilisant des accessoires, on peut rendre son composant réutilisable.

Utilisation des accessoires

Une fois l'installation terminée. Copiez le code ci-dessous dans index.android.js ou dans le fichier index.ios.js pour utiliser les accessoires.

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);

En utilisant des accessoires, on peut rendre son composant générique. Par exemple, vous avez un composant Button. Vous pouvez transmettre différents accessoires à ce composant afin de pouvoir placer ce bouton n'importe où dans sa vue.

_{source: Props-React Native}

PropTypes

Le package prop-types vous permet d'ajouter une vérification de type à l'exécution à votre composant pour vous assurer que les types des accessoires transmis au composant sont corrects. Par exemple, si vous ne transmettez pas un name ou isYummy prop au composant ci-dessous, une erreur se produira en mode développement. En mode production, les vérifications de type prop ne sont pas effectuées. La définition de propTypes peut rendre votre composant plus lisible et maintenable.

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} />

Plusieurs PropTypes

Vous pouvez également avoir plusieurs propTypes pour un des accessoires. Par exemple, le nom des accessoires que je prends peut aussi être un objet, je peux l'écrire comme.

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

Accessoires pour enfants

Il y a aussi des accessoires spéciaux appelés children , qui ne sont pas transmis comme

<Recipe children={something}/>

Au lieu de cela, vous devriez le faire

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

alors vous pouvez le faire dans le rendu de la recette:

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

Vous aurez un composant <Text> dans votre Recipe disant Hello React Native , plutôt cool hum?

Et le propType des enfants est

children: PropTypes.node

Accessoires par défaut

defaultProps vous permet de définir des valeurs par défaut pour votre composant. Dans l'exemple ci-dessous si vous ne passez pas le nom props, il affichera John sinon il affichera la valeur passée

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


Example.defaultProps = {
  name: 'John'
}