ReactNative学习实例（一）动态变化的state

实现一个闪烁的文本效果，该实例摘自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获取文本框的文本值。