【ReactNative】データベースの使い方 & 簡単に保存

今回はReactNativeのStorageを使ったデータ保存機能を作ります。
この機能はNewsPicksなどのニュースアプリ で『あとで読む』や『メモを残す』としてよく利用される機能です。

React Nativeのデータ保存方法のうち、最も一般的な方法である『ローカルストレージに保存する方法』です。まずはこの機能から覚えましょう。

〰〰〰〰〰〰今回作る機能〰〰〰〰〰〰

【追記：セール中】コピペで作るアプリシリーズ
　1/3 ... ニュース記事の取得 & 表示するアプリ：300 → 一時無料
　2/3 ... 引っ張ってニュースを更新する機能作成：500 → 200円
　3/3 ... 記事をあとで読む、メモ機能作成：800 → 500円

1/3 ... ニュース記事の取得 & 表示するアプリ
2/2 ... 引っ張ってニュースを更新する機能作成
3/3 ... 記事をあとで読む、メモ機能作成 ← イマココ

今回の実装ステップ
　✔️ 1. タブ移動をできるようにする
　✔️ 2. ローカルDBを準備する（メモデータの保存のために）
　✔️ 3. メモ & あとで読むをローカルDBに保存する実装を加える
　✔️ 4. ローカルDBを参照し、表示する機能を加える

1. React Nativeでタブ移動できるようにする

🚨タブ移動を作るの流れはこちらです
　✅ 1. 移動に必要なライブラリをインストールする
　✅ 2. 移動先の画面を新規作成する
　✅ 3. App.jsに移動の設定を行う

まずはアプリ下部分にタブを用意して、タブ移動で『お気に入り、メモ』にページ移動できるようにします。

✅ 1. 移動に必要なライブラリをインストールする

ページ移動には『React Native Navigatorのbottom-tab』を利用します。
✍️インストールを行いましょう

yarn add @react-navigation/bottom-tabs

またタブには、アイコンを利用します。
✍️ アイコンを使うのでインストールしましょう

yarn add react-native-vector-icons

✅ 2. 移動先の画面を新規作成する

/screensに『ReadLater.js』と『Memo.js』を新規作成しましょう

✍️ ReadLater.jsを新規作成する

import React from "react";
import { Button, View, Text } from 'react-native';

export const ReadLaterScreen = ( {navigation} ) => {
 return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>あとで読む画面</Text>
   </View>
 );
}

✍️ Memo.jsを新規作成する

import React from "react";
import { Button, View, Text } from 'react-native';

export const MemoScreen = ( {navigation} ) => {
 return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <Text>メモ一覧</Text>
   </View>
 );
}

✅ 3. App.jsに移動の設定を行う

タブ移動の設定を『App.js』に入れます。
（今回はApp.jsに入れていますが、他のページに入れても問題ありません）

import React from 'react';
import {StyleSheet} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; // 新規追加
import {HomeScreen} from "./screens/Home";
import {DetailsScreen} from "./screens/Details";
import {ReadLaterScreen} from "./screens/ReadLater"; // 新規追加
import {MemoScreen} from "./screens/Memo"; // 新規追加
import Ionicons from 'react-native-vector-icons/Ionicons'; // 新規追加

export default function App() {
 const Stack = createStackNavigator();
 // タブ移動の設定を新規追加
 // createBottomTabNavigator ... タブ移動を設定する関数
 const Tab = createBottomTabNavigator();

 // 新規追加
 // - 移動を関数に持たせて、タブ移動の設定で利用
 // - 意図 ... タブ移動の箇所のコードが読みにくくなるため
 const Home = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen name="ホーム" component={HomeScreen} />
       <Stack.Screen name="詳細" component={DetailsScreen} />
     </Stack.Navigator>
   )
 }

 // 新規追加
 // - 移動を関数に持たせて、タブ移動の設定で利用
 // - 意図 ... タブ移動の箇所のコードが読みにくくなるため
 const ReadLater = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen name="あとで読む" component={ReadLaterScreen} />
       <Stack.Screen name="詳細" component={DetailsScreen} />
     </Stack.Navigator>
   )
 }

 // 新規追加
 // - 移動を関数に持たせて、タブ移動の設定で利用
 // - 意図 ... タブ移動の箇所のコードが読みにくくなるため
 const Memo = () => {
   return (
     <Stack.Navigator>
       <Stack.Screen name="メモ" component={MemoScreen} />
       <Stack.Screen name="詳細" component={DetailsScreen} />
     </Stack.Navigator>
   )
 }

 return (
   // タブ移動の設定を新規追加 ====================
   <NavigationContainer>
     <Tab.Navigator
       screenOptions={({ route }) => ({
         tabBarIcon: ({ focused, color, size }) => {
           let iconName;
           // ホームアイコンの設定を行っている ==========
           if (route.name === 'ホーム') {
             iconName = focused // 『三項演算子』で条件分岐。選択中 or 未選択の場合のアイコンを変えることができる（今回は変えてません）
               ? 'ios-home'
               : 'ios-home';
           } else if (route.name === 'Settings') {
             iconName = focused ? 'ios-list-box' : 'ios-list';
           }
           // 下記は、ホームと同様 ====================
           if (route.name === 'あとで読む') {
             iconName = focused
               ? 'ios-pricetag'
               : 'ios-pricetag';
           } else if (route.name === 'Settings') {
             iconName = focused ? 'ios-list-box' : 'ios-list';
           }
           if (route.name === 'メモ') {
             iconName = focused
               ? 'md-document'
               : 'md-document';
           }
           return <Ionicons name={iconName} size={size} color={color} />;
         },
       })}
       tabBarOptions={{
         activeTintColor: 'tomato',
         inactiveTintColor: 'gray',
       }}
     >
       <Tab.Screen name="ホーム" component={Home} />
       <Tab.Screen name="あとで読む" component={ReadLater} />
       <Tab.Screen name="メモ" component={Memo} />
     </Tab.Navigator>
   </NavigationContainer>
 );
}

const styles = StyleSheet.create({
 container: {
   flex: 1,
   backgroundColor: '#fff',
   alignItems: 'center',
   justifyContent: 'center',
 },
});

現在までの状態

2. ローカルDBを準備する（React Native Storage）

メモや、あとで読む機能には『状態の保存』を行う必要があります
状態の保存には『DB（データベース）』を利用します

🚨iOSアプリ作成においてDBの選択肢複数ありますが、最初はわかりやすいものを選びましょう！

ローカルDBを作成する手順
　✅ 1. ローカルストレージに必要なライブラリをインストールする
　✅ 2. ローカルストレージの設定を行うファイルを作成する