react native學習筆記（三）

LOVE快樂發表於2018-04-03
React Native筆記

Props（屬性）

大多陣列件在建立時就可以使用各種引數來進行定製。用於定製的這些引數就稱為props（屬性）。

以常見的基礎元件Image為例，在建立一個圖片時，可以傳入一個名為source的prop來指定要顯示的圖片的地址，以及使用名為style的prop來控制其尺寸。

import React, { Component } from `react`;
import { AppRegistry, Image } from `react-native`;

class Bananas extends Component {
  render() {
    let pic = {
      uri: `https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg`
    };
    return (
      <Image source={pic} style={{width: 193, height: 110}} />
    );
  }
}

AppRegistry.registerComponent(`Bananas`, () => Bananas);

譯註：在iOS上使用http連結的圖片地址可能不會顯示，參見這篇說明修改。

請注意{pic}外圍有一層括號，我們需要用括號來把pic這個變數嵌入到JSX語句中。括號的意思是括號內部為一個js變數或表示式，需要執行後取值。因此我們可以把任意合法的JavaScript表示式通過括號嵌入到JSX語句中。

自定義的元件也可以使用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 style={{alignItems: `center`}}>
        <Greeting name=`Rexxar` />
        <Greeting name=`Jaina` />
        <Greeting name=`Valeera` />
      </View>
    );
  }
}

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

我們在Greeting元件中將name作為一個屬性來定製，這樣可以複用這一元件來製作各種不同的“問候語”。上面的例子把Greeting元件寫在JSX語句中，用法和內建元件並無二致——這正是React體系的魅力所在——如果你想搭建一套自己的基礎UI框架，那就放手做吧！

上面的例子出現了一樣新的名為View的元件。View 常用作其他元件的容器，來幫助控制佈局和樣式。

僅僅使用props和基礎的Text、Image以及View元件，你就已經足以編寫各式各樣的UI元件了。要學習如何動態修改你的介面，那就需要進一步學習State（狀態）的概念。

相關文章