es6 에서 부터는 이전의 함수 형식도 지원하지만, arrow function을 사용을 지향한다.
이번에는 arrow function을 이용한 숫자 카운트 올리는 소스를 작성해보려고한다.
import React, { Component } from "react";
import { Platform, StyleSheet, Text, View, Button, TouchableOpacity } from "react-native";
import { black } from "ansi-colors";
export default class App extends Component {
state = {
number: 1
};
change_number = (type) => {
if(type === 'minus'){
this.setState({ number: this.state.number - 1 })
}else{
this.setState({ number: this.state.number + 1 })
}
};
render() {
return (
<View style={styles.container}>
<View style={styles.button}>
<Button onPress={() =>{this.change_number('minus')}} title={"-"} />
</View>
<Text style={styles.text}>{this.state.number}</Text>
<View style={styles.button}>
<Button onPress={this.change_number } title={"+"} />
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex : 1,
justifyContent : 'center',
flexDirection : 'row',
alignItems : 'center'
},
button: {
flex : 1 ,
margin: 10
},
text : {
flex : 1 ,
textAlign: 'center',
textAlignVertical: 'center',
fontSize : 20
}
});
<결과물>