React Nativeでcounterアプリを作る
はじめに
Hello Worldまでのコードはいろんな記事でまとめられていますが、その次のステップの教材がなかなかありません。
私もReact Nativeを初めてまだ一週間ですが、なんとなくわかってきた気がするので、Counterアプリを作ってボタンのイベントとUIへの値の反映について解説しようと思いまうす。
元のコード
以下のHello Worldコードを元にCounter機能を追加していきます。
レウアウトの処理などが入るとコードが長くなるので極限まで削ぎ落としています。UIがダサいのは勘弁してください。
import React, { Component } from 'react';
import { Text } from 'react-native';
export default class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}ボタンとタップイベント
<Button>の中のonPressにイベントを受け取るメソッドを記述することで、ボタンをタップした際のイベントをキャッチすることができます。
以下のコードを実行しボタンをタップするとconsoleに「タップされました」と出力されます。
import React, { Component } from 'react';
import { Text, Button, View} from 'react-native';
export default class HelloWorldApp extends Component {
onPressButton(){
console.log('タップされました');
}
render() {
return (
<View>
<Text>Hello world!</Text>
<Button
onPress={this.onPressButton}
title='counter'
/>
</View>
);
}
}
countの定義と値の更新
stateにcountというプロパティを定義します。stateについては私もまだ完璧に理解しているわけではないですが、値がよく変更されるものはstateで管理するのが良いようです。
javaScriptはthisの定義が複雑なので、クラス全体のthisを参照するためにonPressButtonメソッドをバインドしてthisを渡しています。
.bind(this)しないでthis.state.countにアクセスをしようとした場合、thisが指し示すのはonPressButton()なので、参照エラーになってしまいます。注意してください。
import React, { Component } from 'react';
import { Text, Button, View} from 'react-native';
export default class HelloWorldApp extends Component {
constructor(){
super()
this.state = {
count: 0
}
}
onPressButton(){
this.state.count += 1 ;
console.log(this.state.count);
}
render() {
return (
<View>
<Text>Hello world!</Text>
<Button
onPress={this.onPressButton.bind(this)}
title='counter'
/>
</View>
);
}
}Textにcountの反映
UIに値を設定するにはstateプロパティを{}で囲んでいれてあげればstateの値が設定されます。
値更新の際の反映は、setState()というメソッドが用意されているので、setStateでcountの値を変更するとUIが自動的に更新されます。
import React, { Component } from 'react';
import { Text, Button, View} from 'react-native';
export default class HelloWorldApp extends Component {
constructor(){
super()
this.state = {
count: 0
}
}
onPressButton(){
this.setState({count: this.state.count+= 1});
}
render() {
return (
<View>
<Text>{this.state.count}</Text>
<Button
onPress={this.onPressButton.bind(this)}
title='counter'
/>
</View>
);
}
}
