EachTrainInfo表面を仮作成

Apps.js

@@ -15,6 +15,7 @@ import { getStationList, lineList } from "./lib/getStationList";
 import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { injectJavascriptData } from "./lib/webViewInjectjavascript";
 import { getStationList2 } from "./lib/getStationList2";
+import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -35,6 +36,13 @@ export default function Apps({
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
 
+  //列車情報表示関連
+  const EachTrainInfoAsSR = useRef(null);
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+  });
+
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
@@ -142,6 +150,8 @@ export default function Apps({
       case "ShowTrainTimeInfo": {
         const { trainNum, limited } = dataSet;
         //alert(trainNum, limited);
+        setTrainInfo({ trainNum, limited });
+        EachTrainInfoAsSR.current?.setModalVisible();
         return;
       }
       default: {
@@ -225,6 +235,7 @@ export default function Apps({
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
       />
 
+      <EachTrainInfo setRef={EachTrainInfoAsSR} data={trainInfo} />
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}

components/ActionSheetComponents/EachTrainInfo.js

@@ -0,0 +1,90 @@
+import React from "react";
+import {
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import ActionSheet from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+export const EachTrainInfo = (props) => {
+  const { setRef, data } = props;
+  console.log(data);
+  return (
+    <ActionSheet ref={setRef} gestureEnabled CustomHeaderComponent={<></>}>
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderRadius: 5,
+          borderColor: "dark",
+          borderWidth: 1,
+        }}
+      >
+        <View style={{ height: 26, width: "100%" }}>
+          <View
+            style={{
+              height: 6,
+              width: 45,
+              borderRadius: 100,
+              backgroundColor: "#f0f0f0",
+              marginVertical: 10,
+              alignSelf: "center",
+            }}
+          />
+        </View>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.limited ? data.limited : ""}
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+            {data.trainNum}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => {
+              LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
+            }}
+          />
+        </View>
+        <ScrollView>
+          <View
+            style={{
+              padding: 10,
+              backgroundColor: "white",
+              borderBottomLeftRadius: 5,
+              borderBottomRightRadius: 5,
+            }}
+          >
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("../../assets/51690-loading-diamonds.json")}
+              />
+              <Text>ほげほげふがふが</Text>
+            </View>
+          </View>
+
+          <View style={{ padding: 10 }}>
+            <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
+              列車遅延情報EXについて
+            </Text>
+            <Text style={{ color: "white" }}>
+              列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
+            </Text>
+          </View>
+        </ScrollView>
+      </View>
+    </ActionSheet>
+  );
+};