props
大多数组件在创建时就可以使用各种参数来进行定制。用于定制的这些参数就称为props
(属性)。
以常见的基础组件Image
为例,在创建一个图片时,可以传入一个名为source
的prop来指定要显示的图片的地址,以及使用名为style
的prop来控制其尺寸。
e.g
import React, { Component } from ‘react‘; import { AppRegistry, Image } from ‘react-native‘; class TianXin extends Component { render() { let pic = { uri: ‘http://img4q.duitang.com/uploads/item/201506/25/20150625170821_hzsVL.jpeg‘ }; return ( <Image source={pic} style={{width: 200, height: 200}} /> ); } } AppRegistry.registerComponent(‘Bananas‘, () => TianXin);
自定义的组件也可以使用props
。通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴。只需在render
函数中引用this.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);
时间: 2024-10-08 10:29:29