Props 属性
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}}/>
);
}
}
- 包围pic的大括号的意思是——括号内部是一个js变量或表达式，需要执行后取值。
我们可以把任何合法的JavaScript表达式通过括号嵌入到JSX语句中
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 Bananas extends Component {
render(){
return (
<View>
<Greeting name='Rexxar'/>
<Greeting name='Jaina'/>
<Greeting name='Valeera'/>
</View>
);
}
}
- 自定义组件Greeting的属性name，在组件中使用
this.props调用。 - props是在父组件中对目标组件进行指定，且指定后，在目标组件的生命周期 属性值不会再改变。
tips:代码示例中多次出现的 View 组件——常用作其他组件的容器，来帮助控制布局和样式
State 状态
props一经指定后，在组件的生命周期中将不再改变，若需要改变的数据，需要使用state。
import React, {Component} from 'react';
import {Text, View} from 'react-native';
class Blink extends Component{
// 声明state对象
state = {isShowingText: true};
// mount时执行函数
componentDidMount() {
setInterval(()=>{
this.setState({
isShowingText: !this.state.isShowingText
});
}, 1000);
}
render(){
if(!this.state.isShowingText) {
return null;
}
return (
<Text>{this.props.text}</Text>
)
}
}
export default class BlinkApp extends Component {
render(){
return (
<View>
<Blink text='I love to blink'/>
<Blink text='Yes blinking is so great'/>
</View>
);
}
}
- 每次调用setState（this.state=xx这样的直接赋值是无效的），BlinkApp就会重新执行render方法，重新渲染；
- state的工作原理和React.js完全一致，可以参阅React.Component API
- 可以使用一些“状态容器”比如Redux来统一管理数据流。
tips:
setState是异步操作，修改不会马上生效；
setState是merge操作，仅修改指定的属性，不会对其他属性产生影响
