設定画面のヘッダーを一斉変更

components/Settings/SettingTopPage.js

@@ -15,6 +15,7 @@ import { ListItem } from "@rneui/themed";
 import TouchableScale from "react-native-touchable-scale";
 import { SwitchArea } from "../atom/SwitchArea";
 import { useNotification } from "../../stateBox/useNotifications";
+import { SheetHeaderItem } from "@/components/atom/SheetHeaderItem";
 
 const versionCode = "6.0";
 
@@ -29,45 +30,10 @@ export const SettingTopPage = ({
   const navigation = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
-      <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
-        <View style={{ flex: 1 }}>
-          <TouchableOpacity
-            onPress={() => navigation.goBack()}
-            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>
+      <SheetHeaderItem title="アプリの設定画面" LeftItem={{
+        title: "閉じる",
+        onPress: () => navigation.goBack(),
+      }} />
       <ScrollView style={{ flex: 1, backgroundColor: "#f8f8fc" }}>
         <View style={{ height: 300, padding: 10 }}>
           <View style={{ flex: 1 }} />