Premiers pas avec React Native

La plupart des personnes qui débutent avec React Native sont profondément confuses à ce sujet, je vais donc à nouveau partager un article d'introduction sur React Native

1 : Accessoires (Propriétés)

La plupart des composants peuvent être personnalisés à l'aide de divers paramètres lors de leur création. Ces paramètres utilisés pour la personnalisation sont appelés props (propriétés). Les accessoires sont spécifiés dans le composant parent, et une fois spécifiés, ils ne changeront pas pendant le cycle de vie du composant spécifié

Personnalisés en utilisant différentes propriétés dans différents scénarios, vous pouvez maximiser la portée de réutilisation des composants personnalisés. Faites simplement référence à this.props dans la fonction render et gérez-le si nécessaire. Voici un exemple :

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

Copier après la connexion

Deux : State (state)

Nous utilisons deux types de données pour contrôler un composant : props et state. Les accessoires sont spécifiés dans le composant parent, et une fois spécifiés, ils ne changeront pas pendant le cycle de vie du composant spécifié. Pour les données qui doivent être modifiées, nous devons utiliser state.

De manière générale, vous devez initialiser l'état dans le constructeur (Annotation : C'est la façon d'écrire ES6, de nombreux premiers exemples ES5 utilisaient la méthode getInitialState pour initialiser l'état , qui sera progressivement supprimé), puis appelaient la méthode setState lorsque des modifications sont nécessaires.

Supposons que nous devions créer un texte clignotant. Le contenu du texte lui-même est spécifié lors de la création du composant, le contenu du texte doit donc être un accessoire . L'état d'affichage ou masqué du texte (une commutation rapide entre l'affichage et le masquage produit un effet de scintillement) change avec le temps, cet état doit donc être écrit dans l'état .

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

Copier après la connexion

Instance2 :

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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!