スイッチの整理

components/Settings/LayoutSettings.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
 import { SwitchArea } from "../atom/SwitchArea";
+import { CheckBox } from "react-native-elements";
 
 export const LayoutSettings = ({
   navigate,
@@ -87,11 +88,14 @@ export const LayoutSettings = ({
             falseImage={require("../../assets/configuration/station_default.jpg")}
             trueImage={require("../../assets/configuration/station_original.jpg")}
           />
-          <SwitchArea
+          {stationMenu == "true" && (
-            str="時刻表PDFをアプリ外で表示"
+            <SimpleSwitch
               bool={usePDFView}
               setBool={setUsePDFView}
+              color="red"
+              str="時刻表PDFをアプリの外で表示する"
             />
+          )}
           <SwitchArea
             str="列車メニュー"
             bool={trainMenu}
@@ -101,13 +105,39 @@ export const LayoutSettings = ({
             falseImage={require("../../assets/configuration/train_default.jpg")}
             trueImage={require("../../assets/configuration/train_original.jpg")}
           />
-          <SwitchArea
+          {trainMenu == "true" && (
-            str="列車現在位置表示(alpha)"
+            <SimpleSwitch
               bool={trainPosition}
               setBool={setTrainPosition}
+              color="red"
+              str="列車の現在位置をアイコン表示"
             />
+          )}
         </View>
       </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")}
+    />
+    <Text
+      style={{
+        fontSize: 22,
+        alignItems: "center",
+        alignContent: "center",
+        textAlign: "center",
+        textAlignVertical: "center",
+        padding: 0,
+        margin: 0,
+      }}
+    >
+      {str}
+    </Text>
+  </View>
+);