レイアウト調整

components/ActionSheetComponents/EachTrainInfo.js

@@ -299,78 +299,25 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
-        <ScrollView
+        {from == "AllTrainDiagramView" || (
-          style={{
+          <ScrollView
-            flexDirection: "row",
-            //width: widthPercentageToDP("200%"),
-            minHeight: 200,
-            height: heightPercentageToDP("20%"),
-          }}
-          horizontal
-          pagingEnabled
-        >
-          <View
             style={{
               flexDirection: "row",
+              //width: widthPercentageToDP("200%"),
               minHeight: 200,
               height: heightPercentageToDP("20%"),
-              width: widthPercentageToDP("100%"),
             }}
+            horizontal
+            pagingEnabled
           >
             <View
               style={{
-                flex: 1,
+                flexDirection: "row",
-                backgroundColor: "white",
+                minHeight: 200,
-                borderRadius: 10,
+                height: heightPercentageToDP("20%"),
-                padding: 10,
+                width: widthPercentageToDP("100%"),
-                margin: 10,
               }}
             >
-              <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                現在地 {currentPosition.toString()}
-              </Text>
-              <View style={{ flex: 1 }} />
-              {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
-                <>
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {
-                      data.trainData?.Pos.replace("（下り）", "")
-                        .replace("（上り）", "")
-                        .split("～")[0]
-                    }
-                  </Text>
-                  <Text style={{ color: "#0099CC", textAlign: "right" }}>
-                    ～
-                  </Text>
-                  <Text
-                    style={{
-                      fontSize: 28,
-                      color: "#0099CC",
-                      textAlign: "right",
-                    }}
-                  >
-                    {
-                      data.trainData?.Pos.replace("（下り）", "")
-                        .replace("（上り）", "")
-                        .split("～")[1]
-                    }
-                  </Text>
-                </>
-              ) : (
-                <Text
-                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
-                >
-                  {data.trainData?.Pos}
-                </Text>
-              )}
-            </View>
-            <View style={{ flex: 1, flexDirection: "column" }}>
               <View
                 style={{
                   flex: 1,
@@ -381,43 +328,101 @@ export const EachTrainInfo = (props) => {
                 }}
               >
                 <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                  {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                  現在地 {currentPosition.toString()}
                 </Text>
                 <View style={{ flex: 1 }} />
-                <Text
+                {data.trainData?.Pos && data.trainData?.Pos.match("～") ? (
-                  style={{
+                  <>
-                    fontSize: 32,
+                    <Text
-                    color: "#0099CC",
+                      style={{
-                    textAlign: "right",
+                        fontSize: 28,
-                  }}
+                        color: "#0099CC",
-                >
+                        textAlign: "right",
-                  {data.trainData?.delay}
+                      }}
-                  {isNaN(data.trainData?.delay) ? "" : "分"}
+                    >
-                </Text>
+                      {
+                        data.trainData?.Pos.replace("（下り）", "")
+                          .replace("（上り）", "")
+                          .split("～")[0]
+                      }
+                    </Text>
+                    <Text style={{ color: "#0099CC", textAlign: "right" }}>
+                      ～
+                    </Text>
+                    <Text
+                      style={{
+                        fontSize: 28,
+                        color: "#0099CC",
+                        textAlign: "right",
+                      }}
+                    >
+                      {
+                        data.trainData?.Pos.replace("（下り）", "")
+                          .replace("（上り）", "")
+                          .split("～")[1]
+                      }
+                    </Text>
+                  </>
+                ) : (
+                  <Text
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {data.trainData?.Pos}
+                  </Text>
+                )}
               </View>
-              <View
+              <View style={{ flex: 1, flexDirection: "column" }}>
-                style={{
+                <View
-                  flex: 1,
-                  backgroundColor: "white",
-                  borderRadius: 10,
-                  padding: 10,
-                  margin: 10,
-                }}
-              >
-                <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
-                <Text
                   style={{
-                    fontSize: 32,
+                    flex: 1,
-                    color: "#0099CC",
+                    backgroundColor: "white",
-                    textAlign: "right",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
                   }}
                 >
-                  {data.trainData?.num}
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>
-                </Text>
+                    {isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
+                  </Text>
+                  <View style={{ flex: 1 }} />
+                  <Text
+                    style={{
+                      fontSize: 32,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {data.trainData?.delay}
+                    {isNaN(data.trainData?.delay) ? "" : "分"}
+                  </Text>
+                </View>
+                <View
+                  style={{
+                    flex: 1,
+                    backgroundColor: "white",
+                    borderRadius: 10,
+                    padding: 10,
+                    margin: 10,
+                  }}
+                >
+                  <Text style={{ fontSize: 15, color: "#0099CC" }}>列番</Text>
+                  <Text
+                    style={{
+                      fontSize: 32,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
+                  >
+                    {data.trainData?.num}
+                  </Text>
+                </View>
               </View>
             </View>
-          </View>
+            {/* <View
-          {/* <View
             style={{
               flexDirection: "column",
               height: heightPercentageToDP("20%"),
@@ -496,7 +501,8 @@ export const EachTrainInfo = (props) => {
               </View>
             </View>
           </View> */}
-        </ScrollView>
+          </ScrollView>
+        )}
         <ScrollView
           style={{ maxHeight: heightPercentageToDP("55%") }}
           nestedScrollEnabled

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 &&
+        {keyList &&
-          Object.keys(allTrainDiagram).map((key) => {
+          keyList.map((key) => (
-            return (
+            <Item openTrainInfo={openTrainInfo} key={key} id={key} />
-              <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>
-            );
-          })}
       </ScrollView>
 
       <TouchableOpacity
@@ -102,23 +86,25 @@ export default function AllTrainDiagramView({ navigation: { navigate } }) {
     </View>
   );
 }
-const UsefulBox = (props) => {
+const Item = ({ id, openTrainInfo }) => {
-  const { icon, backgroundColor, flex, onPressButton, children } = props;
   return (
     <TouchableOpacity
       style={{
-        flex: flex,
+        padding: 5,
-        backgroundColor: backgroundColor,
+        flexDirection: "row",
-        padding: 10,
+        borderColor: "white",
+        borderWidth: 1,
+        margin: 5,
+        borderRadius: 5,
         alignItems: "center",
-        margin: 2,
       }}
-      onPress={onPressButton}
+      onPress={() => openTrainInfo(id)}
     >
-      <MaterialCommunityIcons name={icon} color="white" size={50} />
+      <View style={{ flex: 1 }} />
-      <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+      <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-        {children}
+        {id}
       </Text>
+      <View style={{ flex: 1 }} />
     </TouchableOpacity>
   );
 };

menu.js

@@ -535,18 +535,6 @@ const FixedContentBottom = (props) => {
           JR四国グループの施設をご案内
         </Text>
       </TextBox>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() => props.navigate("AllTrainIDList")}
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          列番検索
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          全列車のダイヤを確認できる機能です。
-        </Text>
-      </TextBox>
       <View style={{ flexDirection: "row" }}>
         <TouchableOpacity
           style={{
@@ -680,12 +668,26 @@ const FixedContentBottom = (props) => {
           ))}
         </View>
       </View>
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
+      <TextBox
+        backgroundColor="#8c00d6"
+        flex={1}
+        onPressButton={() => props.navigate("AllTrainIDList")}
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          列番探索
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          データベースに存在する全列車のダイヤを確認できる機能です。
+        </Text>
+      </TextBox>
       <Text style={{ fontWeight: "bold", fontSize: 20 }}>
         このアプリについて
       </Text>
       <Text>
         このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
       </Text>
+
       <TextBox
         backgroundColor="#CC0000"
         flex={1}