一、Props(自定义参数)
大多数组件可以在创建时使用不同的参数进行自定义。 这些创建参数称为Props。
(1)例如,一个基本的React Native组件是Image。 当您创建图像时,可以使用道具命名源来控制其显示的图像。
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。
(2)你自己的组件也可以使用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);
解释:此示例在JSX中使用Greeting组件,就像内置组件一样,View里面三个自定义控件Greeting除了内容不一样其他都一样,这时就可以在自定义控件里面使用props属性。
另一个新的东西在这里是视图组件。 视图可用作其他组件的容器,以帮助控制样式和布局。
使用props和基本的文本,图像和视图组件,您可以构建各种各样的静态界面。 要了解如何使您的应用随时间变化,您需要了解下面一个知识点状态。
二、State
props和state作为两种数据相关的组建。 props由父节点设置,它们在组件的整个生命周期中都是固定的。 对于要改变的数据,我们必须使用状态。
一般来说,在构造函数中初始化状态,然后当你想改变它时调用setState。
例如,假设我们想让文本一直闪烁。
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
本身三个文本就用到props组件,每一个文本又有显示和隐藏属性,就用到state组件。