カレンダーの日付を押すと、その日の予定がFlatListで並ぶようにする

React Native(Expo)で、カレンダー表示するライブラリは複数あります。

例を挙げると、react-native-calendars、react-native-calendar-events、expo-calendarなどです。ここでは、react-native-calendar-pickerライブラリを使用します。

コード例が掲載されているが、クラス型コンポーネントで作成されています。

まずはこれを関数型コンポーネントへ変更しましょう。

App.js

import { useEffect, useState } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import CalendarPicker from "react-native-calendar-picker";

export default function App() {
  const [selectedStartDate,setSelectedStartDate] = useState(null);

  const onDateChange = (date) => {
    setSelectedStartDate(date);
  }

  const startDate = selectedStartDate ? selectedStartDate.toString() : "";

  return (
    <View style={styles.container}>
        <CalendarPicker onDateChange={onDateChange} />
        <View>
          <Text>SELECTED DATE:{startDate}</Text>
        </View>
        <View style={styles.scheduleContainer}>
          <Text style={{fontSize: 30}}>予定画面</Text>
        </View>
      </View>
  );
}

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

 

次に、開始時刻を決めたいときに使用するライブラリとして、react-native-time-pickerというライブラリがあるのでそれを紹介します。

サンプルプログラム(Demo)が、機能型コンポーネントで記載してあり、使いやすい。

 

さらに、データベースからデータを引き出したときに、表に表示したい場面があるので調べてみると、react-native-reanimated-tableというライブラリがあります。クラス型コンポーネントで記載されているので、Example1,2を機能型コンポーネントへ変更してみる予定。

GitHub - dohooo/react-native-reanimated-table: 📊 A React Native table component using react-native-reanimated and react-native-gesture-handler.

 

カウントタイマーも使用する場面があります。

前にもこの記事は書いてます。

カウントダウンタイマーを作る - JavaScriptからReactまで (hatenablog.com)

ただし、これは、単にタイマーをつくるときのみしか利用できないので自分で作っていこうと思います。

現在の時刻を表示し続けるもの(デジタル時計)をつくる - JavaScriptからReactまで

startTimeを設定し、現在の時刻からstartTimeを引いたものを表示するようにすればよいだけかなと思います。

これでいったん終了。