react-native
Rekwizyty

Wprowadzenie

Co to są rekwizyty?

Rekwizyty służą do przesyłania danych z komponentu nadrzędnego do podrzędnego. Rekwizyty są tylko do odczytu. Komponent podrzędny może otrzymać rekwizyty tylko od rodzica przy użyciu this.props.keyName . Używając rekwizytów można sprawić, by jego komponent mógł być ponownie użyty.

Korzystanie z rekwizytów

Po zakończeniu instalacji. Skopiuj poniższy kod do index.android.js lub do pliku index.ios.js , aby użyć rekwizytów.

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

Używając rekwizytów można uczynić jego komponent generycznym. Na przykład masz komponent Button. Możesz przekazać różne rekwizyty do tego komponentu, aby można było umieścić ten przycisk w dowolnym miejscu jego widoku.

_{źródło: Props-React Native}

PropTypes

Pakiet prop-types propów umożliwia dodanie sprawdzania typu środowiska wykonawczego do komponentu, co zapewnia poprawność prop-types przekazywanych do komponentu. Na przykład, jeśli nie isYummy name lub rekwizytu isYummy do komponentu poniżej, spowoduje to błąd w trybie programowania. W trybie produkcyjnym sprawdzanie typu wniosku nie jest wykonywane. Zdefiniowanie propTypes może uczynić twój komponent bardziej czytelnym i propTypes utrzymaniu.

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

Wiele propTypów

Możesz także mieć wiele propTypes dla jednego rekwizytu. Na przykład, nazwa, którą biorę rekwizyty, może być również przedmiotem, mogę to zapisać jako.

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

Rekwizyty dla dzieci

Istnieją również specjalne rekwizyty zwane children , które nie są przekazywane podobnie

<Recipe children={something}/>

Zamiast tego powinieneś to zrobić

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

możesz to zrobić w renderowaniu receptury:

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

Będziesz miał składnik <Text> w swoim Recipe napisem Hello React Native , całkiem fajny szum?

A propType dzieci jest

children: PropTypes.node

Domyślne rekwizyty

defaultProps pozwala ustawić domyślne wartości prop dla twojego komponentu. W poniższym przykładzie, jeśli nie podasz nazw rekwizytów, wyświetli John, w przeciwnym razie wyświetli przekazaną wartość

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


Example.defaultProps = {
  name: 'John'
}