react-native
Requisiten

Einführung

Was sind Requisiten?

Requisiten werden verwendet, um Daten von der übergeordneten zur untergeordneten Komponente zu übertragen. Requisiten sind nur lesbar. Die untergeordnete Komponente kann die Requisiten nur über this.props.keyName erhalten . Mit Requisiten kann man seine Komponente wiederverwendbar machen.

Verwendung von Requisiten

Sobald das Setup abgeschlossen ist. Kopieren Sie den folgenden Code in index.android.js oder in index.ios.js Datei index.ios.js , um die Requisiten zu verwenden.

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

Mit Requisiten kann man seine Komponente generisch machen. Beispielsweise haben Sie eine Button-Komponente. Sie können dieser Komponente verschiedene Requisiten übergeben, sodass Sie die Schaltfläche an einer beliebigen Stelle in der Ansicht platzieren können.

_{Quelle: Props-React Native}

PropTypes

Mit dem prop-types Paket können Sie der Komponente eine Laufzeitprüfung hinzufügen, um sicherzustellen, dass die an die Komponente übergebenen Requisiten korrekt sind. Wenn Sie z. B. keinen name oder isYummy Komponente an die darunter liegende Komponente übergeben, wird im Entwicklungsmodus ein Fehler isYummy . Im Produktionsmodus werden die Stempeltypüberprüfungen nicht durchgeführt. Durch die Definition von propTypes kann Ihre Komponente lesbarer und wartbarer werden.

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

Mehrere PropTypes

Sie können auch mehrere propTypes für eine Requisite haben. Zum Beispiel kann der Name Requisiten, die ich nehme, auch ein Objekt sein, ich kann es als schreiben.

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

Kinder Requisiten

Es gibt auch spezielle Requisiten, die als children und die nicht gerne übergeben werden

<Recipe children={something}/>

Stattdessen sollten Sie dies tun

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

dann können Sie dies im Rezept von render tun:

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

Sie werden eine <Text> -Komponente in Ihrem Recipe , in der " Hello React Native , ziemlich cooles Brummen heißt?

Und der PropType von Kindern ist

children: PropTypes.node

Standard-Requisiten

Mit defaultProps können Sie Standardwerte für Ihre Komponente festlegen. Wenn Sie im folgenden Beispiel die Namensrequisiten nicht übergeben, wird John angezeigt

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


Example.defaultProps = {
  name: 'John'
}