Props
大多数组件在被创建的时候就能被自定义,带不同的参数,这些创造参数被称为props。
例如,一个基本的React Native组件是一张图片,当你创建一张图片的时候,你可以用用一个叫source的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,你可以把任何括号里的JavaScript表达式放到JSX里。
您自己的组件也可以使用props。这可以让你在你app很多不同的地方使用你创建的单个组件,并在每个地方略有不同的属性,只要在你的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);
使用name作为一个prop让我们自定义Greeting组件,可以让我们在每个问候中都使用这个组件。这个例子也使用JSX的Greeting组件,就像内置组件一样,这样做的是为了让React看起来更酷 - 如果你希望有一个不同的基本UI,你可以再建新的。
另外一个新事物就是View组件。一个View作为其他组件的容器,在协助控制样式(style)和布局(layout)方面是非常有用的。
用props和基本的Text,Image和View组件,您可以建立各种各样的静态画面。要了解如何让您的app随着时间而变化,你需要了解的State。