レイアウト調整

components/ActionSheetComponents/EachTrainInfo.js

@@ -299,6 +299,7 @@ export const EachTrainInfo = (props) => {
               />
             )}
         </View>
+        {from == "AllTrainDiagramView" || (
           <ScrollView
             style={{
               flexDirection: "row",
@@ -364,7 +365,11 @@ export const EachTrainInfo = (props) => {
                   </>
                 ) : (
                   <Text
-                  style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
+                    style={{
+                      fontSize: 28,
+                      color: "#0099CC",
+                      textAlign: "right",
+                    }}
                   >
                     {data.trainData?.Pos}
                   </Text>
@@ -497,6 +502,7 @@ export const EachTrainInfo = (props) => {
             </View>
           </View> */}
           </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}