React Native を始める-jsチュートリアル-php.cn

React Native を始める

零下一度

リリース： 2017-06-26 10:53:03

オリジナル

1208 人が閲覧しました

React Native を初めて使用するほとんどの人は、これについて非常に混乱しています。そのため、React Native の入門章をもう一度共有します

1: Props (属性)

ほとんどのコンポーネントは、作成時にさまざまなパラメータを使用してカスタマイズできます。カスタマイズに使用されるこれらのパラメーターは props (プロパティ) と呼ばれます。プロパティは親コンポーネントで指定され、一度指定されると、指定されたコンポーネントのライフサイクル中は変更されません

さまざまなシナリオでさまざまなプロパティのカスタマイズを使用することで、カスタムコンポーネントカテゴリを最大限に再利用できます。 render 関数内で this.props を参照し、必要に応じて処理するだけです。以下に例を示します:

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

ログイン後にコピー

2: State (状態)

コンポーネントを制御するために 2 種類のデータを使用します。 s と状態。 Props は親コンポーネントで指定され、一度指定されると、指定されたコンポーネントのライフサイクル中は変更されません。変更する必要があるデータには、state を使用する必要があります。

一般的に言えば、

コンストラクターでstateを初期化する必要があります(注釈: これがES6の書き方です。初期のES5のサンプルの多くはgetInitialStateメソッドを使用してstateを初期化します。この実践は次のようになります)段階的に廃止されます)、変更が必要な場合は setState メソッドを呼び出します。

点滅し続けるテキストを作成する必要があるとします。テキストコンテンツ自体はコンポーネントの作成時に指定されるため、テキストコンテンツは

prop である必要があります。テキストの表示または非表示の状態（表示と非表示を高速に切り替えるとちらつき効果が発生します）は時間とともに変化するため、この状態はstateに記述する必要があります。

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

ログイン後にコピー

インスタンス

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>

ログイン後にコピー

以上がReact Native を始めるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。