CodeZine(コードジン)

特集ページ一覧

React Nativeでメモアプリを作ろう~作成画面の構築と実データの利用

基礎からはじめるReact Native入門 第11回

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2020/06/08 11:00

 前回に引き続き、メモアプリの作成を行います。メモを作成・保存する機構を作りながら、画面遷移やデータの永続化について学んでいきましょう。

目次

対象読者

  • JavaScriptとWeb開発の基礎に理解がある方
  • Reactを用いたJavaScriptアプリケーション開発の未経験者

前提環境

 筆者の検証環境は以下の通りです。

  • macOS Catalina 10.15.3
  • Node.js 12.16.1/npm 6.13.4
  • expo-cli 3.18.4
  • expo 36.0.2(React Native 0.61)
  • React 16.9.0

メモアプリを完成させる

 前回から2回に分けて、実践的なアプリ開発のサンプルとして、メモアプリを開発しています。前回は、データ構造を決めてサンプルデータを作成し、それを元にメモの一覧を表示するところまで解説しました(図1の左側)。

図1:メモアプリのラフスケッチ
図1:メモアプリのラフスケッチ

 今回は、その続きとしてメモデータを作成できる画面を作り、アプリとして完成させるところまでを解説します。作業工程の全体像を、改めて確認しておきましょう。

  1. (済)プロジェクトを作成する
  2. (済)使う予定のあるライブラリをインストールする
  3. (済)メイン画面を仮組みする
    • アプリで扱うデータの構造を決める
    • サンプルデータを作る
    • サンプルデータを無加工でUIに表示する
    • データを加工し、レイアウトを調整して見た目を整える
  4. 作成画面を作る
    • UIを作成する
    • データを保存する
  5. メイン画面を完成させる
    • 作成画面で保存したデータを表示する

 1〜3は前回までに実施済みです。今回解説する内容は、4〜5の内容になります。

メモ作成画面の見た目を作る

 それでは、メモを作成するための画面を作っていきましょう。作業は以下の流れで行います。

  • StackNavigatorにメモ作成画面を登録する
  • 画面間を行き来できるようにする
  • メモ作成画面の見た目を作り込む

 まだデータの保存方法は決まっていないので、まずは画面遷移の流れや見た目のみに注力することになります。

StackNavigatorにメモ作成画面を登録する

 まずは、メモ作成画面への画面遷移が成立することを目指しましょう。画面そのものである ComposeScreenコンポーネントを作成して、React Navigationに登録します。内容を作り込むのは後でもいいので、この時点でのComposeScreenは、リスト1のように簡素なものにしておきます。

[リスト1]src/ComposeScreen.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export const ComposeScreen = () => {
  return (
    <View style={styles.container}>
      <Text>メモ作成画面</Text>
    </View>
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
});

 まだプレビューはできませんが、中央に「メモ作成画面」というテキストが表示されているだけの、簡素な画面になることが想像できます。

 続いて、ComposeScreenをReact NavigationのStack Navigatorに登録しましょう(リスト2)。

[リスト2]App.js
   // 省略
   import { MainScreen } from './src/MainScreen';
+  import { ComposeScreen } from './src/ComposeScreen';
 
   const Stack = createStackNavigator();
 
   export default function App() {
     return (
       <PaperProvider>
         <NavigationContainer>
           <Stack.Navigator>
             <Stack.Screen
               name="Main"
               component={MainScreen}
               options={{
                 title: 'メモ帳'
               }}
             />
             {/* (1) */}
+            <Stack.Screen
+              name="Compose"
+              component={ComposeScreen}
+              options={{
+                title: '作成'
+              }}
+            />
           </Stack.Navigator>
         </NavigationContainer>
       </PaperProvider>
     );
   }

 (1)で <Stack.Screen />を追加し、ComposeScreenMainScreenと行き来できる画面であることを宣言しました。

画面間を行き来できるようにする

 次は、実際に画面間を移動できるようにします。MainScreenに「新規作成ボタン」を設置し、これを押すとComposeScreenに移動するようにします(リスト3)。

[リスト3]src/MainScreen.js
// 省略
import { List, FAB } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
// 省略
export const MainScreen = () => {
  const navigation = useNavigation();

  const onPressAdd = () => {
    navigation.navigate('Compose'); // (3)
  };

  return (
    <View style={styles.container}>
      <FlatList
       // 省略
      />
      {/* (1) */}
      <FAB
        style={{
          // (2)
          position: 'absolute',
          right: 16,
          bottom: 16,
        }}
        icon="plus"
        onPress={onPressAdd}
      />
    </View>
  );
}

 図1を見ると、「新規作成ボタン」は右下にFloating Action Button(FAB)を配置して実現することになっています。今回は(1)のようにreact-native-paperの<FAB />コンポーネントを利用しました。icon="plus"を指定して、「+」のアイコンが表示されるようにしています。また、画面の右下にFlatListと重なる形で表示させるために、(2)のようにposition: 'absolute'を記載して、絶対座標で表示位置を指定しています。画面の右端から16、下端から16の位置に表示されるようにしました(図2)。

図2:FABを配置した
図2:FABを配置した

 (3)では、FABのonPressイベントでReact Navigationのnavigate関数を実行して、ComposeScreenへの移動を実現しています。これで画面間の行き来ができるようになりました(図3)。

図3:画面遷移ができた
図3:画面遷移ができた

 MainScreenに戻るためのUIも自動で追加されています。これで下準備が整いました。

メモ作成画面の見た目を作り込む

 メモ作成画面が開けるようになったので、画面内を作り込んでいきましょう。リスト1で実装した内容はすべて消して、リスト4の通り実装します。

[リスト4]src/ComposeScreen.js
import React, { useState } from 'react';
import {
  StyleSheet,
  KeyboardAvoidingView,
  Platform
} from 'react-native';
import { TextInput, Button } from 'react-native-paper';

export const ComposeScreen = () => {
  const [ text, setText ] = useState('');

  const onPressSave = () => {
    // TODO 保存処理
  };

  return (
    <KeyboardAvoidingView // (1)
      style={styles.container}
    >
      <TextInput
        style={{ marginBottom: 16 }}
        mode="outlined"
        placeholder="メモを入力してください"
        multiline
        onChangeText={(text) => setText(text)}
      />
      <Button
        mode="contained"
        onPress={onPressSave}
      >
        保存
      </Button>
    </KeyboardAvoidingView>
  )
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
});

 TextInputに入力された文字列を、useStateで保持する形にしました。キーボードで入力欄が隠れないよう、念のため最上位である(1)にKeyboardAvoidingViewを配置しています。これを実行すると、図4のようになります。

図4:メモ作成画面の見た目ができた
図4:メモ作成画面の見た目ができた

 簡素ではありますが、少しアプリらしくなってきました。あとは実際の動きを作り込んでいきましょう。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト 中川幸哉(ナカガワユキヤ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

バックナンバー

連載:基礎からはじめるReact Native入門

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5