react-native
puntelli

introduzione

Cosa sono gli oggetti di scena?

Gli oggetti vengono utilizzati per trasferire i dati dal componente principale a quello secondario. Gli oggetti sono di sola lettura. Il componente figlio può ottenere solo gli oggetti di scena passati dal genitore usando this.props.keyName . Usando oggetti di scena si può rendere il suo componente riutilizzabile.

Uso di oggetti di scena

Una volta completata l'installazione. Copia il codice qui sotto per index.android.js o per index.ios.js per usare gli oggetti di scena.

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 oggetti di scena si può rendere generico il suo componente. Ad esempio, hai un componente Button. Puoi passare diversi oggetti di scena a quel componente, in modo che uno possa posizionare quel pulsante ovunque nella sua vista.

_{source: Props-React Native}

PropTypes

Il pacchetto prop-types consente di aggiungere il controllo del tipo di runtime al componente per garantire che i tipi di oggetti di scena passati al componente siano corretti. Ad esempio, se non si passa un name o isYummy prop al componente sottostante, si genera un errore nella modalità di sviluppo. Nella modalità di produzione i controlli del tipo di puntello non vengono eseguiti. Definire propTypes può rendere il tuo componente più leggibile e mantenibile.

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 multipli

Puoi anche avere più propTypes per un oggetto di scena. Ad esempio, gli oggetti di scena che sto prendendo possono anche essere un oggetto, posso scrivere come.

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

Puntelli per bambini

C'è anche un oggetto speciale chiamato children , che non è passato in modo simile

<Recipe children={something}/>

Invece, dovresti farlo

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

quindi puoi farlo nel rendering della ricetta:

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

Avrai un componente <Text> nella tua Recipe dice Hello React Native , un bel ronzio?

E il propType dei bambini è

children: PropTypes.node

Puntelli predefiniti

defaultProps ti consente di impostare valori di prop default per il tuo componente. Nell'esempio seguente se non si passano i puntelli del nome, verrà visualizzato John altrimenti verrà visualizzato il valore passato

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


Example.defaultProps = {
  name: 'John'
}