単発の変更

components/Menu/JRSTraInfoBox.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  StyleProp,
+  ViewStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { SheetManager } from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+import { useTrainDelayData } from "@/stateBox/useTrainDelayData";
+import dayjs from "dayjs";
+export const JRSTraInfoBox = () => {
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
+    useTrainDelayData();
+  const styles: { [key: string]: StyleProp<ViewStyle> } = {
+    touch: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      margin: 10,
+      borderColor: "black",
+      borderWidth: 2,
+      overflow: "hidden",
+    },
+    scroll: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      maxHeight: 300,
+    },
+    bottom: {
+      position: "absolute",
+      top: 250,
+      alignItems: "center",
+      width: "100%",
+      height: 50,
+      backgroundColor: "#007FCC88",
+    },
+    box: {
+      padding: 10,
+      backgroundColor: "white",
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+  };
+  return (
+    <TouchableOpacity
+      onPress={() => SheetManager.show("JRSTraInfo")}
+      style={styles.touch}
+    >
+      <ScrollView scrollEnabled={false} style={styles.scroll}>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            列車遅延速報EX
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            {getTime ? dayjs(getTime).format("HH:mm") : NaN}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => setLoadingDelayData(true)}
+          />
+        </View>
+        <View style={styles.box}>
+          {loadingDelayData ? (
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("@/assets/51690-loading-diamonds.json")}
+              />
+            </View>
+          ) : delayData ? (
+            delayData.map((d, index, array) => {
+              let data = d.split(" ");
+              return (
+                <View
+                  style={{ flexDirection: "row" }}
+                  key={data[1] + "key" + index}
+                >
+                  <Text style={{ flex: 15, fontSize: 18 }}>
+                    {data[0].replace("\n", "")}
+                  </Text>
+                  <Text style={{ flex: 5, fontSize: 18 }}>{data[1]}</Text>
+                  <Text style={{ flex: 6, fontSize: 18 }}>{data[3]}</Text>
+                </View>
+              );
+            })
+          ) : (
+            <Text>現在、5分以上の遅れはありません。</Text>
+          )}
+        </View>
+      </ScrollView>
+      <View style={styles.bottom}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          詳細を見る
+        </Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    </TouchableOpacity>
+  );
+};

components/Menu/TitleBar.js

@@ -1,18 +1,25 @@
-import { View, TouchableOpacity, Linking } from "react-native";
+import { View, TouchableOpacity, Linking,Platform, Image, useWindowDimensions } from "react-native";
-import AutoHeightImage from "react-native-auto-height-image";
+import Constants from "expo-constants";
-import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+
 
 export const TitleBar = () => {
+  const { width } = useWindowDimensions();
   return (
-    <View style={{ alignItems: "center" }}>
+    <View
+      style={{
+        alignItems: "center",
+        position: "absolute",
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 100,
+        paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+      }}
+    >
       <TouchableOpacity
         onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
       >
-        <AutoHeightImage
+        <Image source={require("../../assets/Header.png")} style={{ width: width, resizeMode: "contain", backgroundColor: "white", height: 80 }} />
-          source={require("../../assets/Header.png")}
-          resizeMode="contain"
-          width={wp("100%")}
-        />
       </TouchableOpacity>
     </View>
   );

components/Menu/TopMenuButton.tsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { Linking, View } from "react-native";
+import { UsefulBox } from "@/components/TrainMenu/UsefulBox";
+import MaterialCommunityIcons from "@expo/vector-icons/build/MaterialCommunityIcons";
+export const TopMenuButton = () => {
+  const buttonList:{
+    backgroundColor: string;
+    icon: keyof typeof MaterialCommunityIcons.glyphMap;
+    onPress: () => void;
+    title: string;
+  }[] = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+
+
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};

components/atom/UsefulBox.js

@@ -1,23 +0,0 @@
-import { TouchableOpacity, Text } from "react-native";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-export const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children, disable = false } = props; 
-  return (
-    <TouchableOpacity
-      style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
-        alignItems: "center",
-        margin: 2,
-      }}
-      disabled={disable}
-      onPress={onPressButton}
-    >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
-      </Text>
-    </TouchableOpacity>
-  );
-};

stateBox/useTrainDelayData.js

@@ -3,7 +3,7 @@ const initialState = {
   getTime: new Date(),
   setGetTime: () => {},
   loadingDelayData: true,
-  setLoadingDelayData: () => {},
+  setLoadingDelayData: (loading) => {},
   delayData: undefined,
   setDelayData: () => {},
 };