测试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;
