大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props(属性)。
以常见的基础组件Image为例,在创建一个图片时,可以传入一个名为source的prop来指定要显示的图片的地址,以及使用名为style的prop来控制其尺寸。
import React,{Component} from 'react';
import { Image} from 'react-native';
export default class Bananas extends Component{
render(){
let pic={
uri:'https://dpic.tiankong.com/vx/g8/QJ8186298329.jpg?x-oss-process=style/794ws'
};
return(
<Image source={pic} style={{width:193,height:110}}/>
);
}
}
![](https://img.haomeiwen.com/i17611816/798e6ec1b801d4bf.png)
请注意{pic}外围有一层括号,我们需要用括号来把pic这个变量嵌入到JSX语句中。括号的意思是括号内部为一个js变量或表达式,需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
自定义的组件也可以使用props。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需要在render函数中引用this.props,然后按需处理即可。下面是一个例子:
import React, { Component } from 'react';
import { Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<View style={{alignItems: 'center', marginTop: 50}}>
<Text>Hello {this.props.name}!</Text>
</View>
);
}
}
export default class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
运行结果如图
![](https://img.haomeiwen.com/i17611816/7b162ae5dba9e02f.png)
我们在Greeting
组件中将name
作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting
组件写在JSX语句中,用法和内置组件并没有差别——这正是react体系的魅力所在——如果想搭建一套自己的基础UI框架,那就放手做吧。
上面的例子出现了一样新的名为View
的组件。View
长用作其他组件的容器,来帮助控制布局和样式。
仅仅使用props
和基础的Text
、Image
以及View
组件,你就已经足以编写各式各样的UI组件。要学习如何动态修改你的界面,那就需要进一步学习state
(状态)的概念。
网友评论