Erste Schritte mit React Native

Die meisten Leute, für die React Native neu ist, sind darüber zutiefst verwirrt, daher werde ich noch einmal einen Einführungsartikel über React Native veröffentlichen

1: Requisiten (Eigenschaften)

Die meisten Komponenten können beim Erstellen mithilfe verschiedener Parameter angepasst werden. Diese zur Anpassung verwendeten Parameter werden props (Eigenschaften) genannt. Requisiten werden in der übergeordneten Komponente angegeben und ändern sich nach der Festlegung während des Lebenszyklus der angegebenen Komponente nicht.

Durch die Verwendung verschiedener Eigenschaften in verschiedenen Szenarien können Sie individuell angepasst werden Maximieren Sie den Wiederverwendungsbereich benutzerdefinierter Komponenten. Verweisen Sie einfach auf this.props in der render-Funktion und bearbeiten Sie es nach Bedarf. Hier ein Beispiel:

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>
        <greeting></greeting>
        <greeting></greeting>
        <greeting></greeting>
      </view>
    );
  }
}

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

Zwei: Zustand (Zustand)

Wir verwenden zwei Arten von Daten, um eine Komponente zu steuern: Requisiten und Zustand. Requisiten werden in der übergeordneten Komponente angegeben und ändern sich nach der Festlegung während des Lebenszyklus der angegebenen Komponente nicht. Für Daten, die geändert werden müssen, müssen wir state verwenden.

Im Allgemeinen müssen Sie den Zustand im Konstruktor initialisieren (Anmerkung: Dies ist die Schreibweise ES6, viele frühe ES5-Beispiele verwendeten die getInitialState-Methode, um den Status zu initialisieren, der nach und nach auslaufen wird) und riefen dann die setState-Methode auf, wenn Änderungen erforderlich waren.

Angenommen, wir müssen einen blinkenden Text erstellen. Der Textinhalt selbst wird beim Erstellen der Komponente angegeben, daher sollte der Textinhalt eine -Requisite sein. Der Anzeige- oder Ausblendungszustand des Textes (schneller Wechsel zwischen Anzeige und Ausblendung erzeugt einen Flackereffekt) ändert sich im Laufe der Zeit, daher sollte dieser Zustand im Zustand geschrieben werden.

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

class Blink extends Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 1000);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : ' ';
    return (
      <text>{display}</text>
    );
  }
}

class BlinkApp extends Component {
  render() {
    return (
      <view>
        <blink></blink>
        <blink></blink>
        <blink></blink>
        <blink></blink>
      </view>
    );
  }
}

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

Instanz2:

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

class PizzaTranslator extends Component {
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <view>
        <textinput> this.setState({text})}
        />
        <text>
          {this.state.text.split(' ').map((word) => word && '</text></textinput></view>

Das obige ist der detaillierte Inhalt vonErste Schritte mit React Native. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!