我们可以为大多数组件定制各种参数，用于定制的这些参数就称为props（属性）。
属性的自定义 Props
以Image 为例，在创建图片的时候，可以传入一个名为source的prop来指定要显示的图片的地址
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class AwesomeProject extends Component {
render() {
let pic = {
uri: 'https://imgsa.baidu.com/baike/c0%3Dbaike180%2C5%2C5%2C180%2C60/sign=ca5abb5b7bf0f736ccf344536b3cd87c/29381f30e924b899c83ff41c6d061d950a7bf697.jpg
};
return (
<Image source={pic} style={{width: 193, height: 110}} />
);
}
}
{pic}外围的一层括号，我们需要用括号来把pic这个变量嵌入到JSX语句中。括号内部为一个js变量或表达式，需要执行后取值。因此我们可以把任意合法的JavaScript表达式通过括号嵌入到JSX语句中。
自定义的组件也可以使用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 AwesomeProject extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
</View>
);
}
}
把name作为一个属性来定制，这样可以复用来制作不同场景的使用，将Greeting写入JSX语句中，用法和内置组件没有任何区别，如果想定义自己的控件将是个不错的选择。
状态 State
props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
你需要在constructor中初始化State(这是ES6的写法，这里忽略早起ES5)，修改时调用setState方法。ES6传送门
这是一个简单的例子，点击控件触发onPress来记录点击次数，顺便看一下state的调用顺序
import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View , Image} from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {times: 0}
}
timePlus() {
let times = this.state.times
times ++
this.setState({
times: times
})
}
//组件即将安装
componentWillMount() {
console.log('componentWillMount')
}
render() {
console.log('render')
return(
//布局使用创建RN时的默认布局
<View style={styles.container}>
<Text style={styles.welcome} onPress={this.timePlus.bind(this)}>
你点了我 {this.state.times} 次
</Text>
</View>
)
}
//已经安装
componentDidMount() {
console.log('componentDidMount')
}
//是否需要更新
shouldComponentUpdate() {
console.log('shouldComponentUpdate')
return true
}
//将要更新 state
componentWillUpdate() {
console.log('componentWillUpdate')
}
//已经更新 中间会调用 render()
componentDidUpdate() {
console.log('componentDidUpdate')
}
}
});
我们可以看一下RN的简单生命周期
接下来我点击控件触发 onPress
这里大概就是RN State 一个简单的生命周期
理解
在真正的应用程序中，当服务器或用户输入到达新数据时，可以设置状态。 还可以使用像Redux这样的状态容器来控制数据流。 在这种情况下，将使用Redux来修改状态，而不是直接调用setState。
如果无法加载图片，请在info.plst文件中添加如下配置，支持http方式访问
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>qq.com</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
<key>sina.com.cn</key>
<dict>
<key>NSIncludesSubdomains</key>
<true/>
</dict>
</dict>
</dict>
