以常见的基础组件Image
为例,在创建一个图片时,可以传入一个名为source
的prop来指定要显示的图片的地址,以及使用名为style
的prop来控制其尺寸。
<Image source={
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
} style={{ 193, height: 110}} />
类似于OC里面给Image赋值
自定义的组件也可以使用props
。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render
函数中引用this.props
,然后按需处理即可.
class TestProps extends Component {
render() { // 这里是花括号
return ( // 这里是圆括号
<Text>Hello {this.props.name}!</Text>
);
}
}
class HelloWorld extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<View style={styles.container}>
<TestProps name="ooooo" />
<TestProps name="pppppp" />
</View>
);
}
}