設定機能の新しい核完成

MenuPage.js

@@ -46,7 +46,11 @@ export function MenuPage({ navigation }) {
       </Stack.Screen>
       <Stack.Screen
         name="setting"
-        options={{ ...optionData, gestureEnabled: false }}
+        options={{
+          ...optionData,
+          gestureEnabled: false,
+          cardOverlayEnabled: true,
+        }}
       >
         {(props) => <Setting {...props} />}
       </Stack.Screen>

components/Settings/LayoutSettings.js

@@ -0,0 +1,133 @@
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ScrollView,
+  Linking,
+} from "react-native";
+import * as Updates from "expo-updates";
+import { SwitchArea } from "../atom/SwitchArea";
+
+export const LayoutSettings = ({
+  navigate,
+  iconSetting,
+  setIconSetting,
+  mapSwitch,
+  setMapSwitch,
+  stationMenu,
+  setStationMenu,
+  usePDFView,
+  setUsePDFView,
+  trainMenu,
+  setTrainMenu,
+  trainPosition,
+  setTrainPosition,
+  testNFC,
+  updateAndReload,
+}) => {
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity
+            onPress={() => navigate("settingTopPage")}
+            style={{
+              flexDirection: "column",
+              flex: 1,
+            }}
+          >
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                fontWeight: "bold",
+                textAlign: "left",
+                textAlignVertical: "center",
+                color: "white",
+                padding: 10,
+              }}
+            >
+              ＜ 設定
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 20,
+            fontWeight: "bold",
+            textAlign: "center",
+            color: "white",
+            padding: 10,
+          }}
+        >
+          設定画面
+        </Text>
+        <View style={{ flex: 1 }}></View>
+      </View>
+      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+        <View style={{ flex: 1 }}>
+          <SwitchArea
+            str="列車アイコン表示"
+            bool={iconSetting}
+            setBool={setIconSetting}
+            falseImage={require("../../assets/configuration/icon_default.jpg")}
+            trueImage={require("../../assets/configuration/icon_original.jpg")}
+            falseText={"本家文字"}
+            trueText={"車種アイコン"}
+          />
+          <SwitchArea
+            str="トップメニュー表示"
+            bool={mapSwitch}
+            setBool={setMapSwitch}
+            falseImage={require("../../assets/configuration/menu_default.jpg")}
+            trueImage={require("../../assets/configuration/menu_original.jpg")}
+            falseText={"本家(文字＆路線リスト選択)"}
+            trueText={"オリジナル(マップ＆お気に入り)"}
+          />
+          <SwitchArea
+            str="駅メニュー表示"
+            bool={stationMenu}
+            setBool={setStationMenu}
+            falseText={"本家(文字)"}
+            trueText={"オリジナル(駅名標)"}
+          />
+          <SwitchArea
+            str="時刻表PDFをアプリ外で表示"
+            bool={usePDFView}
+            setBool={setUsePDFView}
+          />
+          <SwitchArea
+            str="列車メニュー"
+            bool={trainMenu}
+            setBool={setTrainMenu}
+          />
+          <SwitchArea
+            str="列車現在位置表示(alpha)"
+            bool={trainPosition}
+            setBool={setTrainPosition}
+          />
+          <TouchableOpacity
+            style={{ flexDirection: "row", padding: 10 }}
+            onPress={testNFC}
+          >
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              testNFC
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+    </View>
+  );
+};

components/Settings/SettingTopPage.js

@@ -5,9 +5,11 @@ import {
   TouchableOpacity,
   ScrollView,
   Linking,
+  Image,
 } from "react-native";
 import * as Updates from "expo-updates";
 import { SwitchArea } from "../atom/SwitchArea";
+import { useWindowDimensions } from "react-native";
 
 export const SettingTopPage = ({
   navigate,
@@ -26,110 +28,141 @@ export const SettingTopPage = ({
   testNFC,
   updateAndReload,
 }) => {
+  const { width } = useWindowDimensions();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
         <View style={{ flex: 1 }}>
-          <TouchableOpacity onPress={() => navigate("menu")}>
+          <TouchableOpacity
+            onPress={() => navigate("menu")}
+            style={{
+              flexDirection: "column",
+              flex: 1,
+            }}
+          >
+            <View style={{ flex: 1 }} />
             <Text
               style={{
-                fontSize: 30,
+                fontSize: 20,
                 fontWeight: "bold",
                 textAlign: "left",
+                textAlignVertical: "center",
                 color: "white",
                 padding: 10,
               }}
             >
               閉じる
             </Text>
+            <View style={{ flex: 1 }} />
           </TouchableOpacity>
         </View>
 
         <Text
           style={{
-            fontSize: 30,
+            fontSize: 20,
             fontWeight: "bold",
             textAlign: "center",
             color: "white",
             padding: 10,
           }}
         >
-          設定画面
+          このアプリについて
         </Text>
         <View style={{ flex: 1 }}></View>
       </View>
-      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
+      <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
-        <View style={{ flex: 1 }}>
+        <View style={{ height: 300, padding: 10 }}>
-          <SwitchArea
+          <View style={{ flex: 1 }} />
-            str="列車アイコン表示"
+          <Image
-            bool={iconSetting}
+            source={require("../../assets/Header.png")}
-            setBool={setIconSetting}
+            style={{
-            falseImage={require("../../assets/configuration/icon_default.jpg")}
+              aspectRatio: 8.08,
-            trueImage={require("../../assets/configuration/icon_original.jpg")}
+              height: undefined,
-            falseText={"本家文字"}
+              width: width - 20,
-            trueText={"車種アイコン"}
+              borderRadius: 5,
-          />
+            }}
-          <SwitchArea
-            str="トップメニュー表示"
-            bool={mapSwitch}
-            setBool={setMapSwitch}
-            falseImage={require("../../assets/configuration/menu_default.jpg")}
-            trueImage={require("../../assets/configuration/menu_original.jpg")}
-            falseText={"本家(文字＆路線リスト選択)"}
-            trueText={"オリジナル(マップ＆お気に入り)"}
-          />
-          <SwitchArea
-            str="駅メニュー表示"
-            bool={stationMenu}
-            setBool={setStationMenu}
-            falseText={"本家(文字)"}
-            trueText={"オリジナル(駅名標)"}
-          />
-          <SwitchArea
-            str="時刻表PDFをアプリ外で表示"
-            bool={usePDFView}
-            setBool={setUsePDFView}
-          />
-          <SwitchArea
-            str="列車メニュー"
-            bool={trainMenu}
-            setBool={setTrainMenu}
-          />
-          <SwitchArea
-            str="列車現在位置表示(alpha)"
-            bool={trainPosition}
-            setBool={setTrainPosition}
           />
           <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
+            <View style={{ flex: 1 }} />
-              style={{
+            <Text>内部バージョン: 5.0.2.1</Text>
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              内部バージョン: 5.0.2.1
-            </Text>
             <View style={{ flex: 1 }} />
           </View>
+
+          <View style={{ flex: 1 }} />
+          <Text
+            style={{
+              fontSize: 14,
+              fontStyle: "italic",
+            }}
+          >
+            このアプリは、四国旅客鉄道株式会社の提供する列車走行位置表示システムを利用し、HARUKIN/Xprocessにより一部の機能を拡張したものです。
+          </Text>
+          <Text
+            style={{
+              fontSize: 14,
+              fontStyle: "italic",
+            }}
+          >
+            このアプリに関するお問い合わせは、HARUKIN/Xprocessにお願いします。くれぐれも四国旅客鉄道株式会社にはお問い合わせしないようにお願いします。
+          </Text>
+        </View>
+
+        <View style={{ flex: 1, borderTopWidth: 1, borderColor: "gray" }}>
           <TouchableOpacity
             style={{ flexDirection: "row", padding: 10 }}
-            onPress={testNFC}
+            onPress={() => {}}
           >
             <Text
               style={{
-                fontSize: 25,
+                fontSize: 20,
                 alignItems: "center",
                 alignContent: "center",
                 textAlign: "center",
                 textAlignVertical: "center",
               }}
             >
-              releaseChannel: {Updates.channel}
+              お気に入り登録の管理(工事中)
             </Text>
             <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              {">"}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{ flexDirection: "row", padding: 10 }}
+            onPress={() => navigate("LayoutSettings")}
+          >
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              レイアウト設定
+            </Text>
+            <View style={{ flex: 1 }} />
+            <Text
+              style={{
+                fontSize: 20,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              {">"}
+            </Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={{ flexDirection: "row", padding: 10 }}
@@ -141,7 +174,7 @@ export const SettingTopPage = ({
           >
             <Text
               style={{
-                fontSize: 25,
+                fontSize: 20,
                 alignItems: "center",
                 alignContent: "center",
                 textAlign: "center",

components/Settings/settings.js

@@ -10,6 +10,7 @@ import {
   ToastAndroid,
 } from "react-native";
 import { createStackNavigator } from "@react-navigation/stack";
+import { TransitionPresets } from "@react-navigation/stack";
 import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../../StatusbarDetect";
@@ -18,6 +19,7 @@ var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
 import { SettingTopPage } from "./SettingTopPage";
+import { LayoutSettings } from "./LayoutSettings";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -53,7 +55,20 @@ export default function Setting(props) {
     ]).then(() => Updates.reloadAsync());
   };
   return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="settingTopPage"
+        options={{
+          gestureEnabled: false,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => (
           <SettingTopPage
+            {...props}
             navigate={navigate}
             iconSetting={iconSetting}
             setIconSetting={setIconSetting}
@@ -70,5 +85,39 @@ export default function Setting(props) {
             testNFC={testNFC}
             updateAndReload={updateAndReload}
           />
+        )}
+      </Stack.Screen>
+      <Stack.Screen
+        name="LayoutSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => (
+          <LayoutSettings
+            {...props}
+            navigate={navigate}
+            iconSetting={iconSetting}
+            setIconSetting={setIconSetting}
+            mapSwitch={mapSwitch}
+            setMapSwitch={setMapSwitch}
+            stationMenu={stationMenu}
+            setStationMenu={setStationMenu}
+            usePDFView={usePDFView}
+            setUsePDFView={setUsePDFView}
+            trainMenu={trainMenu}
+            setTrainMenu={setTrainMenu}
+            trainPosition={trainPosition}
+            setTrainPosition={setTrainPosition}
+            testNFC={testNFC}
+            updateAndReload={updateAndReload}
+          />
+        )}
+      </Stack.Screen>
+    </Stack.Navigator>
   );
 }