税理士目指す人のブログ

筋トレや読書のことをはじめとして、プログラミングその他日常生活における様々なことについて書いていきます。

Output Blog

主に筋トレ・プログラミングについて書きます

トップ > React > React Native入門③　シンプルなToDoリストの作成【2020】

React Native入門③　シンプルなToDoリストの作成【2020】

React プログラミング

スポンサーリンク

React Native入門③　シンプルなToDoリストの作成【2020】

React Nativeについて知りたいですか？
前回基本コンポーネントを紹介しました。
本記事では、

  • 便利なコンポーネント紹介
  • ToDoリストを作ろう
  • ToDoリストから見るstate

といったことを紹介します。
React Native初心者の方おすすめです。是非ご覧ください。

ToDoリストに使うコンポーネント紹介

今回使うコンポーネントを紹介します。
前回紹介したものは省略しますのであしからず。

TouchableOpacity

こちら機能としては、ほとんどボタンです。
何が違うかというと、iPhoneでもボタンとして表示される点です。
あとはonPress時の挙動を変えたりもできます。
下記サンプルコードです。


KeyboardAvoidingView

こちらはViewの代わりとなるものです。
機能としては、スマホのキーボードを避けてくれます。
要素がキーボードと重ならないようにしたいとき、こちらを使います。
こちらサンプルコードは省略します。

Constants.statusBarHeight

これはExpoのコンポーネントです。
ステータスバー(スマホの上の時間とか充電が表示されてる部分)の高さを算出してくれる機能です。
何も考えずコードを書くと、ステータスバーに被ってしまう場合がありますが、この機能を使うことでそれを避けることができます。
こちらもサンプルコードは省略します。

ListItem (React Native Elements)

リスト形式のアイテムを良い感じに表示してくれる機能です。
React Native Elementsというパッケージのコンポーネントの1つですね。
下記サンプルです。見たことある感じのレイアウトですよね。

ToDoリストを作ろう

それではToDoリストを作っていきます。
今回はHooksを使用し簡単に書いていきます。
手順としては、

  1. ユーザー入力欄を生成
  2. 入力に応じてTodoリストを作成
  3. それぞれのTodoリストに削除ボタンを付与
  4. すべてリセットするボタンを生成
  5. 微調整

とりあえずまず、最終的なコードを載せます。

動きだけ見てできそうな方は、コード書いてみてくださいね。

実際に解説します。

ユーザー入力部分

<TextInput style={{width:"80%",height:40,marginTop:10,marginLeft:5,borderColor: 'gray', borderWidth: 1}} 
     ref={ref => this.textInputRef=ref}
     placeholder="Enter Words"
     autoFocus={true}
     clearButtonMode="always"
     onSubmitEditing={(e) => {
              const date = new Date();
              const newItem = {
                key:list.length,
                text:e.nativeEvent.text,
                hours:date.getHours(),
                minute:date.getMinutes(),
                }
     setList((list) => list.concat(newItem))
     this.textInputRef.clear()
}}/>

ここで行うことは、
ユーザー入力を受け付け→エンター(PC)やリターン(スマホ)が押される→newItemオブジェクトを生成し、stateにセット→入力欄をクリア
というのが大まかな流れです。

まずonSubmitEditingで入力内容が送信されます。
このとき、{nativeEvent: {text, eventCount, target}}というオブジェクトが渡されます。
これを用いて、上記ではnewItemオブジェクトを生成します。
newItemオブジェクトには key, text, hours, minute をオブジェクトとして生成してます。


その後、ステートフックでstateをセットするわけですが、
このとき、配列listに対して、newItemオブジェクトを結合させます。
イメージとしては、
list = [ {newItem}, {newItem}, {newItem}, ... }という感じになります。
入力を複数受け付ける場合、このような扱い方が定石です。

あとはrefですね。
refでTextInputコンポーネントそのものにアクセスできるようになります。
TextInputコンポーネントは、clear()メソッドを持ちます。clear()は、入力内容の破棄です。
これを最後に実行し、入力内容をクリアします。

その他は、
autoFocus は自動で入力欄にフォーカス
clearButtonModeはiPhone専用の機能で、Inputフォームに✖ボタンが生成され、入力内容をユーザーが消去できます。

ToDoリスト生成

<FlatList data={list} renderItem={({item,index}) => 
    <ListItem 
        title={item.text}
        subtitle={item.hours+"時"+item.minute+"分"}
        bottomDivider
        rightIcon={{
              name:"close",
              onPress:() => {
                const _list = [].concat(list);
                _list.splice(index,1);
                setList(_list)
              }}}
          />} 
        />

Todoリストを生成します。
この部分では、Flatlistでlistをマッピングし、それぞれのアイテムに対してListItemを生成します。
こうすることでリスト表示が綺麗に纏まるほか、リストの要素に対するカスタマイズも幅広く行うことができるようになります。

FlatListにはitemとindexを渡します。indexを渡す理由は、✖ボタンで要素を削除できるようにするためです。

ListItemでは、titleとしてTodoの内容、subtitleとして時間、下線、右側に✖ボタン、という構成です。

rightIconのonPress動作は難しくないです。
やっていることとしては、listを_listに複製、_listに対しspliceで✖がクリックされたindexを削除、_listをstateとしてセットという感じです。

ちなみにですが、FlatListは特に、stateとしてセットする情報に気を付けないと、再レンダーされない場合があるので注意してください。
具体的には、ここの list はsetListを用いても用いなくても値を変更できますが

list = newItem

このような感じで直接代入した場合、再レンダーされない、つまり画面が更新されないので注意して下さい。

Resetボタン追加

<TouchableOpacity style={{
  height:40,
  marginLeft:10,
  marginTop:10,
  padding:5,
  backgroundColor:"red",
  alignItems:"center",
  justifyContent:"center"
  }} 

  onPress={() => setList([])}
>
  <Text style={{color:"white",fontWeight:"bold"}}>Reset</Text>
</TouchableOpacity>

ここはとても簡単です。
Resetボタンに対し、押下されたときにlistを初期化するようにonPressを入れてあげるだけです。

TouchableOpacityは開始タグと終了タグでテキストを囲みます。
このとき、<Text>を使っても使わなくても表示はされます。
が、カスタマイズ性を考慮するなら間違いなく<Text>で囲んだほうが良いです。

微調整

あとはスタイルを変更していくだけです。
といっても今回むずかしいものはないので、省略します。笑
CSSとほとんど同じなのでそこまで詳しくやる必要ないかなと思ってます。


まとめ

React Native入門③ということでTodoリストを作成しました。
意外と短く簡単でしたね。

スポンサーリンク