React Native的入門篇

大多數初學react native 的人，對此深有困惑，故，再次分享一篇react native 的入門解惑篇

一：Props(屬性)

大多數元件在建立時就可以使用各種參數來進行自訂。用於自訂的這些參數就稱為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);

二：State（狀態）

我們使用兩個資料來控制一個元件：props和state。 props是在父元件中指定，而且一經指定，在被指定的元件的生命週期中則不再改變。  對於需要改變的數據，我們需要使用state。

一般來說，你需要在constructor中初始化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);

##實例

2:

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中文網其他相關文章！