大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props
(属性)。
以常见的基础组件Image
为例,在创建一个图片时,可以传入一个名为source
的 prop 来指定要显示的图片的地址,以及使用名为style
的 prop 来控制其尺寸。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import React, { Component } from 'react'; import { Image } from 'react-native'; export default 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}} /> ); } } |
译注:在 iOS 上使用 http 链接的图片地址可能不会显示,参见这篇说明修改。从 Android9 开始,也会默认阻止 http 请求,请参考相关配置
请注意{pic}
外围有一层括号,我们需要用括号来把pic
这个变量嵌入到 JSX 语句中。括号的意思是括号内部为一个 js 变量或表达式,需要执行后取值。因此我们可以把任意合法的 JavaScript 表达式通过括号嵌入到 JSX 语句中。
自定义的组件也可以使用props
。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render
函数中引用this.props
,然后按需处理即可。下面是一个例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
class Greeting extends Component { render() { return ( <View style={{alignItems: 'center'}}> <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> ); } } |
我们在Greeting
组件中将name
作为一个属性来定制,这样可以复用这一组件来制作各种不同的“问候语”。上面的例子把Greeting
组件写在 JSX 语句中,用法和内置组件并无二致——这正是 React 体系的魅力所在——如果你想搭建一套自己的基础 UI 框架,那就放手做吧!
上面的例子出现了一样新的名为View
的组件。View
常用作其他组件的容器,来帮助控制布局和样式。
仅仅使用props
和基础的Text
、Image
以及View
组件,你就已经足以编写各式各样的 UI 组件了。要学习如何动态修改你的界面,那就需要进一步学习 State(状态)的概念。