大多數(shù)組件可以在創(chuàng)建時(shí)自定義，具有不同的參數(shù)站宗。這些創(chuàng)建參數(shù)被稱為屬性。
例如益愈，一個(gè)基本的React Native組件是Image梢灭。當(dāng)你創(chuàng)建一個(gè)圖像時(shí)，你可以使用一個(gè)名為source的屬性來(lái)控制它顯示的圖像蒸其。
import React, { Component } from 'react';
import { Image } from 'react-native';
export default class Bananas extends Component {
render () {
let pic = {
uri: '[https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg](https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg)'
};
return (
<Image source={ pic } style={{ width: 375, height: 200 }} />
);
}
}
注意{pic}被大括號(hào)包圍敏释，以將變量pic嵌入到JSX中。您可以將任何JavaScript表達(dá)式放在JSX中的大括號(hào)內(nèi)摸袁。
image.png
你自己的屬性也可以使用屬性钥顽。這使您可以在應(yīng)用程序的許多不同位置使用單個(gè)組件，每個(gè)位置的屬性稍有不同靠汁。只需在您的渲染函數(shù)中引用this.props即可蜂大。這是一個(gè)例子：
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}</Text>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{ alignItems: 'center' }}>
<Greeting name='張三' />
<Greeting name='李四' />
<Greeting name='王五' />
</View>
);
}
}
image.png
使用名稱作為屬性允許我們自定義Greeting組件，所以我們可以為每個(gè)問(wèn)候重用該組件蝶怔。這個(gè)例子也使用JSX中的Greeting組件奶浦，就像內(nèi)置組件一樣。做這件事的力量是讓React如此酷的原因 - 如果你發(fā)現(xiàn)自己希望有一套不同的用戶界面原語(yǔ)可以使用踢星，那么你只需要發(fā)明新的澳叉。
另一個(gè)新事物是View組件。一個(gè)視圖作為其他組件的容器是有用的沐悦，以幫助控制樣式和布局成洗。
使用道具和基本的文本，圖像和視圖組件藏否，您可以構(gòu)建各種各樣的靜態(tài)屏幕泌枪。
