大規模引っ越し

components/Settings/SettingTopPage.js

@@ -0,0 +1,177 @@
+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 SettingTopPage = ({
+  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("menu")}>
+            <Text
+              style={{
+                fontSize: 30,
+                fontWeight: "bold",
+                textAlign: "left",
+                color: "white",
+                padding: 10,
+              }}
+            >
+              閉じる
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        <Text
+          style={{
+            fontSize: 30,
+            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}
+          />
+          <View style={{ flexDirection: "row", padding: 10 }}>
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              内部バージョン: 5.0.2.1
+            </Text>
+            <View style={{ flex: 1 }} />
+          </View>
+          <TouchableOpacity
+            style={{ flexDirection: "row", padding: 10 }}
+            onPress={testNFC}
+          >
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              releaseChannel: {Updates.channel}
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={{ flexDirection: "row", padding: 10 }}
+            onPress={() =>
+              Linking.openURL(
+                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
+              )
+            }
+          >
+            <Text
+              style={{
+                fontSize: 25,
+                alignItems: "center",
+                alignContent: "center",
+                textAlign: "center",
+                textAlignVertical: "center",
+              }}
+            >
+              プライバシーポリシー
+            </Text>
+            <View style={{ flex: 1 }} />
+          </TouchableOpacity>
+        </View>
+      </ScrollView>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={updateAndReload}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          設定を保存して再読み込み
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+};

components/Settings/settings.js

@@ -9,6 +9,7 @@ import {
   useWindowDimensions,
   ToastAndroid,
 } from "react-native";
+import { createStackNavigator } from "@react-navigation/stack";
 import * as ExpoFelicaReader from "../../modules/expo-felica-reader/src";
 import * as Updates from "expo-updates";
 import StatusbarDetect from "../../StatusbarDetect";
@@ -16,7 +17,9 @@ import { AS } from "../../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
+import { SettingTopPage } from "./SettingTopPage";
 
+const Stack = createStackNavigator();
 export default function Setting(props) {
   const {
     navigation: { navigate },
@@ -50,241 +53,22 @@ export default function Setting(props) {
     ]).then(() => Updates.reloadAsync());
   };
   return (
-    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <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,
-            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}
-          />
-          <View style={{ flexDirection: "row", padding: 10 }}>
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              内部バージョン: 5.0.2.1
-            </Text>
-            <View style={{ flex: 1 }} />
-          </View>
-          <TouchableOpacity
-            style={{ flexDirection: "row", padding: 10 }}
-            onPress={testNFC}
-          >
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              releaseChannel: {Updates.channel}
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-          <TouchableOpacity
-            style={{ flexDirection: "row", padding: 10 }}
-            onPress={() =>
-              Linking.openURL(
-                "https://nexcloud.haruk.in/sites/press-harukin/JRShikokuApps/policy"
-              )
-            }
-          >
-            <Text
-              style={{
-                fontSize: 25,
-                alignItems: "center",
-                alignContent: "center",
-                textAlign: "center",
-                textAlignVertical: "center",
-              }}
-            >
-              プライバシーポリシー
-            </Text>
-            <View style={{ flex: 1 }} />
-          </TouchableOpacity>
-        </View>
-      </ScrollView>
-      <TouchableOpacity
-        style={{
-          padding: 10,
-          flexDirection: "row",
-          borderColor: "white",
-          borderWidth: 1,
-          margin: 10,
-          borderRadius: 5,
-          alignItems: "center",
-        }}
-        onPress={updateAndReload}
-      >
-        <View style={{ flex: 1 }} />
-        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
-          設定を保存して再読み込み
-        </Text>
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-    </View>
+    <SettingTopPage
+      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}
+    />
   );
 }
-const SimpleSwitch = ({
-  bool,
-  setBool,
-  color,
-  value,
-  image = require("../assets/icons.png"),
-  subText = "",
-}) => {
-  const { width } = useWindowDimensions();
-  return (
-    <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,
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-        }}
-      >
-        {str}
-      </Text>
-      <View style={{ flexDirection: "row", padding: 10 }}>
-        <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>
-  );
-};

components/atom/SimpleSwitch.js

@@ -0,0 +1,54 @@
+import {
+  useWindowDimensions,
+  View,
+  TouchableOpacity,
+  Text,
+  Image,
+} from "react-native";
+export const SimpleSwitch = ({
+  bool,
+  setBool,
+  color,
+  value,
+  image = require("../../assets/icons.png"),
+  subText = "",
+}) => {
+  const { width } = useWindowDimensions();
+  return (
+    <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>
+  );
+};

components/atom/SwitchArea.js

@@ -0,0 +1,45 @@
+import { View, Text, Image, TouchableOpacity } from "react-native";
+import { SimpleSwitch } from "./SimpleSwitch";
+export const SwitchArea = ({
+  str,
+  bool,
+  setBool,
+  falseImage,
+  trueImage,
+  falseText,
+  trueText,
+}) => {
+  return (
+    <View style={{ flexDirection: "column", padding: 10 }}>
+      <Text
+        style={{
+          fontSize: 25,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {str}
+      </Text>
+      <View style={{ flexDirection: "row", padding: 10 }}>
+        <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>
+  );
+};