首頁  >  文章  >  web前端  >  React Native的入門篇

React Native的入門篇

零下一度
零下一度原創
2017-06-26 10:53:031177瀏覽

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

一:Props(屬性)

大多數元件在建立時就可以使用各種參數來進行自訂。用於自訂的這些參數就稱為props(屬性)。 props是在父元件中指定,而且一經指定,在被指定的元件的生命週期中則不再改變

透過在不同的場景使用不同的屬性定制,可以盡量提高自訂元件的複用範疇。只要在render函數中引用this.props,然後按需處理即可。以下是一個範例:

React Native的入門篇
#
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);
React Native的入門篇

二:State(狀態)

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

一般來說,你需要在constructor中初始化state(翻譯:這是ES6的寫法,早期的許多ES5的例子使用的是getInitialState方法來初始化state,這個做法會逐漸被淘汰),然後在需要修改時呼叫setState方法。

假如我們需要製作一段不停閃爍的文字。文字內容本身在元件建立時就已經指定好了,所以文字內容應該是一個prop。而文字的顯示或隱藏的狀態(快速的顯隱切換就產生了閃爍的效果)則是隨著時間變化的,因此這一狀態應該寫到state中。

React Native的入門篇
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);
React Native的入門篇
##實例

2:

React Native的入門篇
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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn