新デザイン作成、途中まで

MenuPage.js

@@ -44,7 +44,10 @@ export function MenuPage({ navigation }) {
       >
         {(props) => <Menu {...props} getCurrentTrain={getCurrentTrain} />}
       </Stack.Screen>
-      <Stack.Screen name="setting" options={optionData}>
+      <Stack.Screen
+        name="setting"
+        options={{ ...optionData, gestureEnabled: false }}
+      >
         {(props) => <Setting {...props} />}
       </Stack.Screen>
       <Stack.Screen

components/settings.js

@@ -1,11 +1,21 @@
 import React, { useState, useEffect, useLayoutEffect } from "react";
-import { View, Text, TouchableOpacity, Linking } from "react-native";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Linking,
+  ScrollView,
+  Image,
+  useWindowDimensions,
+  ToastAndroid,
+} from "react-native";
 import * as ExpoFelicaReader from "../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../StatusbarDetect";
 import { AS } from "../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
+import AutoHeightImage from "react-native-auto-height-image";
 
 export default function Setting(props) {
   const {
@@ -37,14 +47,27 @@ export default function Setting(props) {
       AS.setItem("usePDFView", usePDFView.toString()),
       AS.setItem("trainSwitch", trainMenu.toString()),
       AS.setItem("trainPositionSwitch", trainPosition.toString()),
-    ]).then(() => {
+    ]).then(() => Updates.reloadAsync());
-      Updates.reloadAsync();
-    });
   };
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ flex: 1, backgroundColor: "white" }}>
+      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ backgroundColor: "#0099CC" }}>
+        <View style={{ flex: 1 }}>
+          <TouchableOpacity onPress={() => navigate("menu")}>
+            <Text
+              style={{
+                fontSize: 30,
+                fontWeight: "bold",
+                textAlign: "left",
+                color: "white",
+                padding: 10,
+              }}
+            >
+              閉じる
+            </Text>
+          </TouchableOpacity>
+        </View>
+
         <Text
           style={{
             fontSize: 30,
@@ -56,22 +79,34 @@ export default function Setting(props) {
         >
           設定画面
         </Text>
+        <View style={{ flex: 1 }}></View>
       </View>
+      <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <View style={{ flex: 1 }}>
           <SwitchArea
-            str="列車アイコンを表示する"
+            str="列車アイコン表示"
             bool={iconSetting}
             setBool={setIconSetting}
+            falseImage={require("../assets/configuration/icon_default.jpg")}
+            trueImage={require("../assets/configuration/icon_original.jpg")}
+            falseText={"本家文字"}
+            trueText={"車種アイコン"}
           />
           <SwitchArea
-            str="マップを表示する(beta)"
+            str="トップメニュー表示"
             bool={mapSwitch}
             setBool={setMapSwitch}
+            falseImage={require("../assets/configuration/menu_default.jpg")}
+            trueImage={require("../assets/configuration/menu_original.jpg")}
+            falseText={"本家(文字＆路線リスト選択)"}
+            trueText={"オリジナル(マップ＆お気に入り)"}
           />
           <SwitchArea
-            str="駅メニューを表示"
+            str="駅メニュー表示"
             bool={stationMenu}
             setBool={setStationMenu}
+            falseText={"本家(文字)"}
+            trueText={"オリジナル(駅名標)"}
           />
           <SwitchArea
             str="時刻表PDFをアプリ外で表示"
@@ -141,7 +176,7 @@ export default function Setting(props) {
             <View style={{ flex: 1 }} />
           </TouchableOpacity>
         </View>
-      </View>
+      </ScrollView>
       <TouchableOpacity
         style={{
           padding: 10,
@@ -163,16 +198,64 @@ export default function Setting(props) {
     </View>
   );
 }
-const SimpleSwitch = ({ bool, setBool, color }) => (
+const SimpleSwitch = ({
-  <Switch
+  bool,
-    value={bool == "true" ? true : false}
+  setBool,
-    color={bool == "true" ? color : null}
+  color,
-    onValueChange={(value) => setBool(value.toString())}
+  value,
-  />
+  image = require("../assets/icons.png"),
-);
+  subText = "",
-const SwitchArea = ({ str, bool, setBool }) => {
+}) => {
+  const { width } = useWindowDimensions();
   return (
-    <View style={{ flexDirection: "row", padding: 10 }}>
+    <View style={{ flex: 1 }}>
+      <TouchableOpacity
+        style={{
+          backgroundColor: bool == value.toString() ? color : null,
+          padding: 5,
+          borderRadius: 5,
+          margin: 10,
+          alignItems: "center",
+          justifyContent: "center",
+          flexDirection: "row",
+          flex: 1,
+        }}
+        onPress={() => setBool(value.toString())}
+      >
+        <Image
+          source={image}
+          style={{
+            aspectRatio: 1,
+            height: undefined,
+            width: "100%",
+            borderRadius: 5,
+          }}
+          resizeMethod="scale"
+        />
+      </TouchableOpacity>
+      <Text
+        style={{
+          fontSize: 14,
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {subText}
+      </Text>
+    </View>
+  );
+};
+const SwitchArea = ({
+  str,
+  bool,
+  setBool,
+  falseImage,
+  trueImage,
+  falseText,
+  trueText,
+}) => {
+  return (
+    <View style={{ flexDirection: "column", padding: 10 }}>
       <Text
         style={{
           fontSize: 25,
@@ -184,8 +267,24 @@ const SwitchArea = ({ str, bool, setBool }) => {
       >
         {str}
       </Text>
-      <View style={{ flex: 1 }} />
+      <View style={{ flexDirection: "row", padding: 10 }}>
-      <SimpleSwitch bool={bool} setBool={setBool} color="red" />
+        <SimpleSwitch
+          bool={bool}
+          setBool={setBool}
+          color="red"
+          value={false}
+          image={falseImage}
+          subText={falseText}
+        />
+        <SimpleSwitch
+          bool={bool}
+          setBool={setBool}
+          color="red"
+          value={true}
+          image={trueImage}
+          subText={trueText}
+        />
+      </View>
     </View>
   );
 };