React常用语法测试

测试ES6语法的小例子

'use strict';



import React, {

  StyleSheet,

  Text,

  View,

  TextInput,

  TouchableHighlight,

  Platform,

  Component

} from 'react-native';



class ECMAScript6Sample extends React.Component {



  constructor(props){

    super(props);

    this.state = {

      name : '初始值' ,

    };

  }



  render() {

    return (<View style = {styles.container}>

              <ConsoleView name = {this.state.name}></ConsoleView>

              <View style = {styles.btnContainer}>

                <TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test001()}>

                  <Text style = {styles.text} >循环</Text>

                </TouchableHighlight>

                <TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test002(2,3,4)}>

                  <Text style = {styles.text} >函数rest参数</Text>

                </TouchableHighlight>

                <TouchableHighlight style = {styles.button} underlayColor = {'#00FF00'} onPress = {() => this.test003(2,3,4)}>

                  <Text style = {styles.text} >动态字符串</Text>

                </TouchableHighlight>

              </View>

            </View>

          );

  }



  /*

* ES6引入了for ... of循环作为遍历所有数据结构的统一方法。一个数据结构只要部署了Symbol.iterator属性，就被视为具有Iterator接口，就可以用for

  *  ... of 循环遍历它的成员。

  */

  test001(){

    const arr = ['red' , 'green' ,'blue'];

    let str = '';

    for(let v of arr){

      str += v;

    }

    this.log(str);

  }



  /**

  * ES6引入了rest参数（形式为"... 变量名"）

  */

  test002(...values){

    let sum = 0 ;

    for(var v of values){

      sum += v;

    }

    this.log(sum);

  }



  /**

  * 测试动态字符串

  */

  test003(...values){

    let sum = 0 ;

    for(var v of values){

      sum += v;

    }

    this.log(`test(...values){

      let sum = 0 ;

      for(var v of values){

        sum += v;

      }

      console.log(sum);

    }

    sum = ${sum}`);

  }





  /**

  * 重置状态导致页面重新渲染

  */

  log(str : string){

    this.setState({name : str});

  }

}



class ConsoleView extends React.Component{

  render(){

     return(

       <View style = {styles.consoleContainer}>

          <Text>{this.props.name}</Text>

       </View>

     );

  }

}





var styles = StyleSheet.create({

  container: {

    flex: 1,

    alignItems: 'stretch',

    backgroundColor: '#FFFFFF',

    marginTop : 64 ,

  },

  btnContainer: {

    flex : 1 ,

    backgroundColor : '#FFFFFF' ,

    padding : 10 ,

  },

  consoleContainer :{

    height : 200 ,

    backgroundColor : '#F0F0F0' ,

    padding : 10 ,

    margin : 10 ,

    borderWidth : 2 ,

    borderColor : 'blue' ,

    borderRadius : 10 ,

  },

  button : {

    height : 50 ,

    backgroundColor : '#2438d2',

    borderRadius : 6 ,

    alignItems : 'center' ,

    marginBottom : 10 ,

    justifyContent : 'center' ,

  },

  text : {

    color : 'white',

    fontSize : 16 ,

  },



})



module.exports = ECMAScript6Sample;