React-Native 屬性設定props
阿新 • • 發佈:2019-01-01
元件的靜態資料由props控制,大多陣列件在建立時就可以使用各種引數來進行定製。用於定製的這些引數就稱為props(屬性)。
//Image中的source和style就是其屬性(props)
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}} />
);
}
}
自定義的元件也可以使用props。通過在不同的場景使用不同的屬性定製,可以儘量提高自定義元件的複用範疇。只需在render函式中引用this.props,然後按需處理即可。下面是一個例子:
//這個例子中的this.props.name就是用的在LotsOfGreetings中初始化的時候給定的name裡面的值
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);
如果是涉及到動態變化就需要使用到state屬性了。