{"id":261,"date":"2023-08-17T14:27:15","date_gmt":"2023-08-17T05:27:15","guid":{"rendered":"https:\/\/shugomatsuzawa.com\/techblog\/?p=261"},"modified":"2023-08-17T14:27:17","modified_gmt":"2023-08-17T05:27:17","slug":"react-native-calendars%e3%81%ae%e3%83%ac%e3%82%b9%e3%83%9d%e3%83%b3%e3%82%b7%e3%83%96%e5%af%be%e5%bf%9c%e3%81%8c%e5%a4%a7%e5%a4%89%e3%81%a0%e3%81%a3%e3%81%9f%e8%a9%b1","status":"publish","type":"post","link":"https:\/\/shugomatsuzawa.com\/techblog\/2023\/08\/17\/261\/","title":{"rendered":"React Native Calendars\u306e\u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u5bfe\u5fdc\u304c\u5927\u5909\u3060\u3063\u305f\u8a71"},"content":{"rendered":"\n

\u307e\u305f\u307e\u305f\u9854\u9762\u795e\u7d4c\u9ebb\u75fa\u30b1\u30a2\u30a2\u30d7\u30ea<\/a>\u306e\u8a71\u3002<\/p>\n\n\n\n

iPad\u3084Android\u306b\u5bfe\u5fdc\u3067\u304d\u306a\u3044\u304b\u3068\u7d20\u4eba\u306a\u308a\u306b\u8272\u3005\u6a21\u7d22\u3057\u3066\u3044\u308b\u3068\u3053\u308d\u3002\uff08GitHub\uff09<\/a>
iPadOS\u306b\u306fSplit View\u3084Slide Over\u304c\u3042\u308b\u3057\u3001Android\u3082\u30d5\u30a9\u30eb\u30c0\u30d6\u30eb\u30b9\u30de\u30fc\u30c8\u30d5\u30a9\u30f3\u7b49\u5897\u3048\u3066\u304d\u305f\u306e\u3067\u3001\u53ef\u5909\u30b5\u30a4\u30ba\u306b\u5bfe\u5fdc\u3057\u305f\u3044\u3002
\u3057\u304b\u3057React Native Calendars\u306f\u305d\u3046\u7c21\u5358\u306b\u306f\u3044\u304b\u306a\u3044\u306e\u3060\u3002<\/p>\n\n\n\n

\u3084\u308a\u305f\u3044\u3053\u3068<\/h2>\n\n\n\n

React Native Calendars\u306e\u30d0\u30fc\u30b8\u30e7\u30f3\u306f1.1300.0\u3002
Horizontal CalendarList<\/a>\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u3002<\/p>\n\n\n\n

import { StatusBar } from 'expo-status-bar';\nimport React, { useState } from 'react';\nimport { View, SafeAreaView, ScrollView, useWindowDimensions } from 'react-native';\nimport { Button } from 'react-native-paper';\nimport { CalendarList } from 'react-native-calendars';\n\nconst HomeScreen = ({ navigation }) => {\n  const window = useWindowDimensions();\n\n  const [calendarKey, setCalendarKey] = useState(0);\n  const reloadCalendar = () => {\n    setCalendarKey(calendarKey + 1);\n  };\n\n  return (\n    <ScrollView contentInsetAdjustmentBehavior=\"automatic\">\n      <SafeAreaView>\n        <CalendarList\n          key={calendarKey}\n          staticHeader\n          calendarHeight={400}\n          calendarWidth={window.width}\n          horizontal={true}\n          pagingEnabled={true}\n        \/>\n        <View>\n          <Button onPress={reloadCalendar}>\u4eca\u65e5<\/Button>\n        <\/View>\n      <\/SafeAreaView>\n      <StatusBar style=\"auto\" \/>\n    <\/ScrollView>\n  );\n};\n\nexport default HomeScreen;<\/code><\/pre>\n\n\n\n
\u3057\u304b\u3057\u3053\u308c\u3060\u3068\u753b\u9762\u30b5\u30a4\u30ba\u304c\u5909\u308f\u3063\u3066\u3082\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u30b5\u30a4\u30ba\u304c\u5909\u308f\u3089\u306a\u3044\u3002
\u3061\u306a\u307f\u306bCalendarList<\/code>\u306ekey<\/code>\u3092\u66f4\u65b0\u3057\u3066\u3082\u30c0\u30e1\u3060\u3063\u305f\u3002<\/p>\n\n\n\n
\u753b\u9762\u30b5\u30a4\u30ba\u304c\u5909\u66f4\u3055\u308c\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3092\u53d6\u5f97<\/h2>\n\n\n\n
\u3069\u3046\u3044\u3046\u65b9\u6cd5\u3067\u30ab\u30ec\u30f3\u30c0\u30fc\u3092\u30ea\u30ed\u30fc\u30c9\u3059\u308b\u306b\u305b\u3088\u3001\u307e\u305a\u753b\u9762\u30b5\u30a4\u30ba\u304c\u5909\u308f\u3063\u305f\u30bf\u30a4\u30df\u30f3\u30b0\u3067\u5b9f\u884c\u3057\u306a\u3051\u308c\u3070\u306a\u3089\u306a\u3044\u3002
Dimensions<\/code>\u3092\u4f7f\u3046\u3053\u3068\u306b\u3057\u305f\u3002<\/p>\n\n\n\n
import { StatusBar } from 'expo-status-bar';\nimport React, { useState } from 'react';\nimport { View, SafeAreaView, ScrollView, Dimensions, useWindowDimensions } from 'react-native';\nimport { Button } from 'react-native-paper';\nimport { useFocusEffect } from '@react-navigation\/native';\nimport { CalendarList } from 'react-native-calendars';\n\nconst HomeScreen = ({ navigation }) => {\n  const window = useWindowDimensions();\n\n  const [calendarKey, setCalendarKey] = useState(0);\n  const reloadCalendar = () => {\n    setCalendarKey(calendarKey + 1);\n  };\n\n  useFocusEffect(\n    React.useCallback(() => {\n      const handleDimensionsChange = () => {\n        \/\/ \u30ea\u30ed\u30fc\u30c9\u306e\u30ed\u30b8\u30c3\u30af\u3092\u3053\u3053\u306b\u8ffd\u52a0\n      };\n      dimensionsHandler=Dimensions.addEventListener('change',handleDimensionsChange)\n      return ()=>dimensionsHandler.remove()\n    }, [])\n  );\n\n  return (\n    <ScrollView contentInsetAdjustmentBehavior=\"automatic\">\n      <SafeAreaView>\n        <CalendarList\n          key={calendarKey}\n          staticHeader\n          calendarHeight={400}\n          calendarWidth={window.width}\n          horizontal={true}\n          pagingEnabled={true}\n        \/>\n        <View>\n          <Button onPress={reloadCalendar}>\u4eca\u65e5<\/Button>\n        <\/View>\n      <\/SafeAreaView>\n      <StatusBar style=\"auto\" \/>\n    <\/ScrollView>\n  );\n};\n\nexport default HomeScreen;<\/code><\/pre>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u30ea\u30ed\u30fc\u30c9<\/h2>\n\n\n\n
\u30ab\u30ec\u30f3\u30c0\u30fc\u306e\u30ea\u30ed\u30fc\u30c9\u306f\u3001\u7d50\u5c40CalendarList<\/code>\u3092\u51fa\u3057\u5165\u308c\u3059\u308b\u3060\u3051\u306b\u3057\u305f\u3002
\u4ed6\u306e\u753b\u9762\u3092\u8868\u793a\u4e2d\u306b\u753b\u9762\u30b5\u30a4\u30ba\u304c\u5909\u66f4\u3055\u308c\u308b\u53ef\u80fd\u6027\u3082\u8003\u616e\u3057\u3001useIsFocused<\/code>\u3082\u4f7f\u3063\u3066\u3044\u308b\u3002<\/p>\n\n\n\n
import { StatusBar } from 'expo-status-bar';\nimport React, { useState } from 'react';\nimport { View, SafeAreaView, ScrollView, Dimensions, useWindowDimensions } from 'react-native';\nimport { ActivityIndicator, Button } from 'react-native-paper';\nimport { useFocusEffect, useIsFocused } from '@react-navigation\/native';\nimport { CalendarList } from 'react-native-calendars';\n\nconst HomeScreen = ({ navigation }) => {\n  const window = useWindowDimensions();\n\n  const [calendarKey, setCalendarKey] = useState(0);\n  const [calendarVisibility, setCalendarVisibility] = useState(true);\n  const reloadCalendar = () => {\n    setCalendarVisibility(false);\n    setTimeout(() => {\n      setCalendarKey(calendarKey + 1);\n      setCalendarVisibility(true);\n    },100);\n  };\n\n  useFocusEffect(\n    React.useCallback(() => {\n      const handleDimensionsChange = () => {\n        \/\/ \u30ea\u30ed\u30fc\u30c9\u306e\u30ed\u30b8\u30c3\u30af\u3092\u3053\u3053\u306b\u8ffd\u52a0\n        reloadCalendar()\n      };\n      dimensionsHandler=Dimensions.addEventListener('change',handleDimensionsChange)\n      return ()=>dimensionsHandler.remove()\n    }, [])\n  );\n\n  return (\n    <ScrollView contentInsetAdjustmentBehavior=\"automatic\">\n      <SafeAreaView>\n        {useIsFocused() === false ?\n          <View>\n            <ActivityIndicator animating={true} \/>\n          <\/View>\n        : calendarVisibility ?\n          <CalendarList\n            key={calendarKey}\n            staticHeader\n            calendarHeight={400}\n            calendarWidth={window.width}\n            horizontal={true}\n            pagingEnabled={true}\n          \/>\n        :\n          <View>\n            <ActivityIndicator animating={true} \/>\n          <\/View>\n        }\n        <View>\n          <Button onPress={reloadCalendar}>\u4eca\u65e5<\/Button>\n        <\/View>\n      <\/SafeAreaView>\n      <StatusBar style=\"auto\" \/>\n    <\/ScrollView>\n  );\n};\n\nexport default HomeScreen;<\/code><\/pre>\n\n\n\n
\u843d\u3068\u3057\u7a74<\/h2>\n\n\n\n
\u8a66\u3057\u305f\u3068\u3053\u308dDimensions<\/code>\u3092\u4f7f\u3063\u305f\u30a6\u30a3\u30f3\u30c9\u30a6\u30b5\u30a4\u30ba\u5909\u66f4\u30bf\u30a4\u30df\u30f3\u30b0\u306e\u5224\u5b9a\u306f\u3001Apple\u30b7\u30ea\u30b3\u30f3Mac\u3067\u306f\u3067\u304d\u306a\u304b\u3063\u305f\u3002
\u7d50\u5c40Mac\u5bfe\u5fdc\u3092\u8ae6\u3081\u308b\u304b\u3001Split View & Slide Over\u5bfe\u5fdc\u3092\u8ae6\u3081\u308b\u304b\u306e\u3069\u3061\u3089\u304b\u306b\u306a\u308a\u305d\u3046\u3060\u3002<\/p>\n\n\n\n
Split View\u3068Slide Over\u3092\u7121\u52b9\u306b\u3059\u308b\u5834\u5408\u306f\u3001app.json<\/code>\u306b\u6b21\u3092\u8ffd\u52a0\u3059\u308b\u3002<\/p>\n\n\n\n
{\n  \"expo\": {\n    \"ios\": {\n      \"requireFullScreen\": true\n    }\n  }\n}<\/code><\/pre>\n\n\n\n
\u53c2\u8003<\/h2>\n\n\n\n