レイアウト調整

components/AllTrainDiagramView.js

@@ -23,7 +23,12 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
   const { areaInfo } = useAreaInfo();
   const { allTrainDiagram } = useAllTrainDiagram();
   const [originalStationList, setOriginalStationList] = useState(); // 第一要素
+  const [keyList, setKeyList] = useState(); // 第二要素
   useEffect(() => getStationList().then(setOriginalStationList), []);
+  useEffect(
+    () => allTrainDiagram && setKeyList(Object.keys(allTrainDiagram)),
+    []
+  );
 
   const openTrainInfo = (d) => {
     const train = customTrainDataDetector(d);
@@ -45,7 +50,7 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
       },
       navigate,
       originalStationList,
-      from: "LED",
+      from: "AllTrainDiagramView",
     };
     SheetManager.show("EachTrainInfo", {
       payload,
@@ -54,31 +59,10 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
   return (
     <View style={{ backgroundColor: "#0099CC", height: "100%" }}>
       <ScrollView>
-        {allTrainDiagram &&
-          Object.keys(allTrainDiagram).map((key) => {
-            return (
-              <TouchableOpacity
-                style={{
-                  padding: 10,
-                  flexDirection: "row",
-                  borderColor: "white",
-                  borderWidth: 1,
-                  margin: 10,
-                  borderRadius: 5,
-                  alignItems: "center",
-                }}
-                onPress={() => openTrainInfo(key)}
-              >
-                <View style={{ flex: 1 }} />
-                <Text
-                  style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
-                >
-                  {key}
-                </Text>
-                <View style={{ flex: 1 }} />
-              </TouchableOpacity>
-            );
-          })}
+        {keyList &&
+          keyList.map((key) => (
+            <Item openTrainInfo={openTrainInfo} key={key} id={key} />
+          ))}
       </ScrollView>
 
       <TouchableOpacity
@@ -102,23 +86,25 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
     </View>
   );
 }
-const UsefulBox = (props) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
+const Item = ({ id, openTrainInfo }) => {
   return (
     <TouchableOpacity
       style={{
-        flex: flex,
-        backgroundColor: backgroundColor,
-        padding: 10,
+        padding: 5,
+        flexDirection: "row",
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 5,
+        borderRadius: 5,
         alignItems: "center",
-        margin: 2,
       }}
-      onPress={onPressButton}
+      onPress={() => openTrainInfo(id)}
     >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-        {children}
+      <View style={{ flex: 1 }} />
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+        {id}
       </Text>
+      <View style={{ flex: 1 }} />
     </TouchableOpacity>
   );
 };