实现一个闪烁的文本效果,该实例摘自RN中文网:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
//引入需要的组件,文本框等,这里多引了几个
import { AppRegistry, Text,View,Navigator ,Image,StyleSheet,PixelRatio} from 'react-native';
class AwesomeProject extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {showText:true};
//在构造器中设置一个每隔一秒触发一次的定时任务,改变state:showText
setInterval(()=>{
this.setState({showText:!this.state.showText});
},1000);
}
render() {
//判断state并赋值
let text=this.state.showText? '你好啊':'';
return (
<View style={styles.container}>
<Text>{text}</Text>
</View>
)
}
}
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:'center',
alignItems:'center',
backgroundColor:'#123456'
}
});
// 注意,这里用引号括起来的'AwesomeProject'必须和你init创建的项目名一致
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
这个例子比较简单,首先引入文本组件,然后重写构造器。props一般是不变的属性,比如这里的文本。state表示动态变化的属性和值,比如这里的是否显示。
在构造器中创建一个state,然后写一个定时任务改变这个state,改变的方法是setState。
然后就是在渲染模块运用这个属性,通过this.state.来获取并使用。这里我判断了一个这个属性的值,如果为真的话就让let变量为“你好啊”,否则为空。然后把这个let赋值给文本框。
其他:当然,这个组件不只能显示“你好啊”,可以通过this.props.text获取文本框的文本值。