EachTrainInfo表面を仮作成

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>
+  );
+};