仮表示機能実装

components/ActionSheetComponents/EachTrainInfo.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import {
   View,
   LayoutAnimation,
@@ -10,9 +10,21 @@ import {
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
+import trainList from "../../assets/originData/trainList";
 export const EachTrainInfo = (props) => {
   const { setRef, data } = props;
   console.log(data);
+  const [trainData, setTrainData] = useState([]);
+  useEffect(() => {
+    if (!data.trainNum) return;
+    const TD = trainList[data.trainNum];
+    if (!TD) {
+      setTrainData([]);
+      return;
+    }
+    console.log(TD);
+    setTrainData(TD.split("#"));
+  }, [data]);
   return (
     <ActionSheet ref={setRef} gestureEnabled CustomHeaderComponent={<></>}>
       <View
@@ -65,24 +77,18 @@ export const EachTrainInfo = (props) => {
             }}
           >
             <View style={{ alignItems: "center" }}>
-              <LottieView
+              {/* <LottieView
                 autoPlay
                 loop
                 style={{ width: 150, height: 150, backgroundColor: "#fff" }}
                 source={require("../../assets/51690-loading-diamonds.json")}
               />
-              <Text>ほげほげふがふが</Text>
+              <Text>ほげほげふがふが</Text> */}
+              {trainData.map((i, index) => {
+                return <Text>{i}</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>