Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
19
Help us understand the problem. What is going on with this article?
@daiend

【React Native】アプリ開発未経験のフロントエンドエンジニアがToDoリストを作ってみる

More than 3 years have passed since last update.

はじめに

普段はAngularなどでWebアプリケーションを開発している私ですが、急にReact Nativeを学びたくなったので、徒然とこの記事を書きはじめました。
↓な感じのToDoリストを作ります。

ToDo

最終成果物はこちらです。
todo-sample

この記事でわかること

  • React Nativeの基礎の基礎

ベストプラクティス的なやつとか、こんな応用的な使い方してやったぜ!みたいなのは全く書いてません。

まずはインストールしないとはじまらない

React Nativeには「node」と「watchman」が必要らしいので、さくっとインストールします。

brew install node
brew install watchman

続いて、React Nativeの本体をインストールです。

npm install -g react-native-cli

プロジェクトを作って起動してみる

react-native init Todo
cd Todo
react-native run-ios

Welcome

この画面が表示されれば起動成功です。
ちなみにシミュレーター上で「Command + D → Debug JS Remotely」を選択することで、デベロッパーツールによるデバッグできるので、覚えておいたほうが良いです。

簡単に設計する

この後は「index.ios.js」に処理をズンズン書いていけば何とかなりそうですが、せっかくなので手を動かす前に必要なClassはどんな感じになるか考えてみます。

スクリーンショット_2016-12-18_18_20_40_.png

  • TodoListContainer
    画面を囲うContainer。TodoListとFooterを持つ。
  • TodoList
    TodoList全体。TodoListItemを持つ。
  • TodoListItem
    TodoList単体。CheckboxとTodoを表示するTextを持つ。
  • Footer
    画面下部に固定されているFooter。textInputと追加ボタンを持つ。

最低これらのClassがあれば何とかなりそうです。

初期データを表示する

まずは「index.ios.js」をいじくって、TodoListContainerを初期化します。

  • index.ios.js
import React, { Component } from 'react';
import {
  AppRegistry
} from 'react-native';

import TodoListContainer from 'Todo/src/TodoListContainer';

class Todo extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <TodoListContainer />
    );
  }
}

AppRegistry.registerComponent('Todo', () => Todo);

データは、Todoを追加する処理をする「Footer」とTodoを描画する「TodoList」の橋渡し的な役割を担う「TodoListConainer」に持たせます。

  • TodoListContainer.js
this.state = {
  todos: [
    {text: 'Learn react native'},
    {text: 'Make a to-do app'}
  ]
}

そして、「TodoList」のpropsにデータを渡します。
stateとpropsは下記が参考になります。
React における State と Props の違い

render() {
  return (
    <View style={{flex: 1}}>
      <ScrollView
        style={styles.base}
      >
        <TodoList
          todos={this.state.todos} //TodoListのpropsにデータを渡す
        />
      </ScrollView>
     ・・・
}

続いて、ReactNativeで用意されているコンポーネントである「ListView」でTodoを描画します。

  • TodoList.js
constructor(props) {
  super(props);

  //ListViewで扱うデータ形式にする
  this.dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2
  });
}

render() {
  return (
    <ListView
      dataSource={this.dataSource.cloneWithRows(this.props.todos)}
      renderRow={(todo) => <TodoListItem {...todo} />}
      renderSeparator={this.renderSeparator}
    />
  );
}
  • TodoListItem.js
render() {
  return (
    <View style={styles.todo}>
      <CheckBox
        isChecked={this.props.complete}
        onClick={()=>this.onClick()}
      />
      <Text style={[styles.text, this.state.isChecked ? styles.isTextDisabled : null]}>
        {this.props.text}
      </Text>
    </View>
  );
}

Checkboxは下記コンポーネントを使わせていただきました。
react-native-check-box

Todoを追加する

Todoの追加は「Footer」に配置してある「追加」が押されたタイミングで、「TodoListContainer」のstateを更新して行います。

  • Footer.js
onAddPress() {
  // TodoListContainerのaddTodoメソッドにtextを渡して実行
  this.props.addTodo(this.state.text);

  // Todo追加後はTextInputを空にする
  this.setState({
    text: ''
  });
}
  • TodoListContainer.js

stateにセットした配列に新しく値を追加する際は、concatで処理するのが定石っぽいのでそうします。

addTodo(text) {
  this.setState({
    todos: this.state.todos.concat([{text: text}])
  });
}

スクリーンショット 2016-12-18 22.36.19.png

追加された!∩( ・ω・)∩ばんじゃーい

おわりに

そんなこんなでToDoリスト(ToDoの削除ができないのは気にしない)が出来上がりました。
React.jsをある程度知っていれば思った以上に高速で開発できますね…
やっててよかったReact.js。

19
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
daiend
GA technologiesでフロントエンドやってます。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
19
Help us understand the problem. What is going on with this article?