お気に入り画面を仮作成

components/Settings/FavoriteSettings.js

@@ -0,0 +1,160 @@
+import React from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { SwitchArea } from "../atom/SwitchArea";
+import { CheckBox } from "react-native-elements";
+import { TripleSwitchArea } from "../atom/TripleSwitchArea";
+
+export const FavoriteSettings = ({
+  navigate,
+  iconSetting,
+  setIconSetting,
+  mapSwitch,
+  setMapSwitch,
+  stationMenu,
+  setStationMenu,
+  usePDFView,
+  setUsePDFView,
+  trainMenu,
+  setTrainMenu,
+  trainPosition,
+  setTrainPosition,
+  headerSize,
+  setHeaderSize,
+}) => {
+  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={"本家\n(文字アイコン)"}
+            trueText={"オリジナル\n(車種アイコン)"}
+          />
+          <SwitchArea
+            str="トップメニュー表示"
+            bool={mapSwitch}
+            setBool={setMapSwitch}
+            falseImage={require("../../assets/configuration/menu_default.jpg")}
+            trueImage={require("../../assets/configuration/menu_original.jpg")}
+            falseText={"本家\n(文字＆路線リスト)"}
+            trueText={"オリジナル\n(マップ＆お気に入り)"}
+          />
+          <SwitchArea
+            str="駅メニュー表示"
+            bool={stationMenu}
+            setBool={setStationMenu}
+            falseText={"本家\n(文字)"}
+            trueText={"オリジナル\n(駅名標)"}
+            falseImage={require("../../assets/configuration/station_default.jpg")}
+            trueImage={require("../../assets/configuration/station_original.jpg")}
+          >
+            <SimpleSwitch
+              bool={usePDFView}
+              setBool={setUsePDFView}
+              color="red"
+              str="時刻表PDFをアプリの外で表示する"
+            />
+          </SwitchArea>
+          <SwitchArea
+            str="列車メニュー"
+            bool={trainMenu}
+            setBool={setTrainMenu}
+            falseText={"本家"}
+            trueText={"オリジナル"}
+            falseImage={require("../../assets/configuration/train_default.jpg")}
+            trueImage={require("../../assets/configuration/train_original.jpg")}
+          >
+            <TripleSwitchArea
+              str={"ヘッダーサイズ"}
+              bool={headerSize}
+              setBool={setHeaderSize}
+              firstItem={{
+                firstImage: require("../../assets/configuration/train_original_small.jpg"),
+                firstText: "小固定",
+                firstValue: "small",
+              }}
+              secondItem={{
+                secondImage: require("../../assets/configuration/train_original.jpg"),
+                secondText: "既定(可変)",
+                secondValue: "default",
+              }}
+              thirdItem={{
+                thirdImage: require("../../assets/configuration/train_original.jpg"),
+                thirdText: "大固定",
+                thirdValue: "big",
+              }}
+            />
+            <SimpleSwitch
+              bool={trainPosition}
+              setBool={setTrainPosition}
+              color="red"
+              str="列車の現在位置をアイコン表示"
+            />
+          </SwitchArea>
+        </View> */}
+        <Text>作成中</Text>
+      </ScrollView>
+    </View>
+  );
+};
+
+const SimpleSwitch = ({ bool, setBool, str }) => (
+  <View style={{ flexDirection: "row" }}>
+    <CheckBox
+      checked={bool == "true" ? true : false}
+      checkedColor="red"
+      onPress={() => setBool(bool == "true" ? "false" : "true")}
+      containerStyle={{
+        flex: 1,
+        backgroundColor: "#00000000",
+        borderColor: "white",
+        alignContent: "center",
+      }}
+      textStyle={{ fontSize: 20, fontWeight: "normal" }}
+      title={str}
+    />
+  </View>
+);

components/Settings/SettingTopPage.js

@@ -114,7 +114,10 @@ export const SettingTopPage = ({
         </View>
 
         <View style={{ flex: 1, borderTopWidth: 1, borderColor: "gray" }}>
-          <ListItem style={{ flexDirection: "row" }} onPress={() => {}}>
+          <ListItem
+            style={{ flexDirection: "row" }}
+            onPress={() => navigate("FavoriteSettings")}
+          >
             <Text
               style={{
                 fontSize: 20,

components/Settings/settings.js

@@ -20,6 +20,7 @@ import { Switch } from "react-native-elements";
 import AutoHeightImage from "react-native-auto-height-image";
 import { SettingTopPage } from "./SettingTopPage";
 import { LayoutSettings } from "./LayoutSettings";
+import { FavoriteSettings } from "./FavoriteSettings";
 
 const Stack = createStackNavigator();
 export default function Setting(props) {
@@ -123,6 +124,39 @@ export default function Setting(props) {
           />
         )}
       </Stack.Screen>
+      <Stack.Screen
+        name="FavoriteSettings"
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      >
+        {(props) => (
+          <FavoriteSettings
+            {...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}
+            headerSize={headerSize}
+            setHeaderSize={setHeaderSize}
+          />
+        )}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }