React-Native 基礎(二) 使用Props實現傳參定製
阿新 • • 發佈:2019-01-27
官方庫提供的props
下面以Image為例,這裡的source和style就是props.<Image source={pic} style={{width: 193, height: 110}}
中pic外面的{}表示其內部是一個變數或者表示式,任意合法的javascript表示式都可以通過{}嵌入到JSX語句中。
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);
自定義的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);
上述程式碼中即定製了名為name的props