我们使用两种数据来控制一个组件：props和state。props是在父组件中指定，而且一经指定，在被指定的组件的生命周期中则不再改变。 对于需要改变的数据，我们需要使用state。
一般来说，你需要在constructor中初始化state（译注：这是ES6的写法，早期的很多ES5的例子使用的是getInitialState方法来初始化state，这一做法会逐渐被淘汰），然后在需要修改时调用setState方法。
假如我们需要制作一段不停闪烁的文字。文字内容本身在组件创建时就已经指定好了，所以文字内容应该是一个prop。而文字的显示或隐藏的状态（快速的显隐切换就产生了闪烁的效果）则是随着时间变化的，因此这一状态应该写到state中。
创建Blink组件，新建一个blink.js文件
class Blink extends Component {
// 需要在constructor中初始化state，这是ES6的语法，之前使用的是getInitialState方法来初始化state
// 这一做法将会逐渐被淘汰，在需要修改的地方调用setState方法即可
constructor(props) {
super(props);
this.state = {showText: true};
// 每1000毫秒对showText状态取一次反操作
setInterval(() => {
this.setState(partialState => {
return {showText: !partialState.showText};
});
}, 1000);
}
render() {
// 根据当前的showText的值的情况来决定是否显示text内容
let display = this.state.showText ? this.props.text : " ";
return (
<Text>{display}</Text>
);
}
}
module.exports = Blink;
在index.ios.js中引入Blink组件
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image
} from 'react-native';
var Blink = require("./blink.js");
class Demo extends Component {
render() {
return (
<View style={{marginTop: 50, alignItems: "center"}}>
<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('Demo', () => Demo);
执行效果如下：
运行结果.gif
