一、prosp属性介绍
组件在创建时可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。 比如Image组件,可以传入一个名为source的prop来指定要显示的图片,以及使用名为style的prop来控制其尺寸。
二、代码举例
1.基础组件Image
使用props,
传入一个名为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);
注意:
{pic}
外围有一层括号,我们需要用括号来把pic
这个变量嵌入到JSX语句中。
括号的意思是括号内部为一个js变量或表达式,需要执行后取值。
因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
效果:
2.自定义的组件使用props
。使用时只需在render
函数中引用this.props
,然后按需处理即可。
自定义Greeting 组件,并将name作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。
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);
效果: