Appsのprops構文整理

Apps.js

@@ -9,10 +9,20 @@ import { MenuPage } from "./MenuPage.js";
 import { useAreaInfo } from "./stateBox/useAreaInfo.js";
 import "./components/ActionSheetComponents/sheets.js";
 
-const Tab = createBottomTabNavigator();
 export function AppContainer() {
+  const Tab = createBottomTabNavigator();
   const { areaInfo, areaIconBadgeText } = useAreaInfo();
   const navigationRef = React.useRef();
+  const getTabProps = (name, label, icon, iconFamily, tabBarBadge) => ({
+    name,
+    options: {
+      tabBarLabel: label,
+      headerTransparent: true,
+      gestureEnabled: true,
+      tabBarIcon: initIcon(icon, iconFamily),
+      tabBarBadge,
+    },
+  });
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
       <Tab.Navigator
@@ -21,41 +31,25 @@ export function AppContainer() {
         lazy={false}
       >
         <Tab.Screen
-            name="login"
+          {...getTabProps("login", "位置情報", "barchart", "AntDesign")}
-            options={{
+          children={(props) => <Top {...props} navigationRef={navigationRef} />}
-              tabBarLabel: "位置情報",
+        />
-              headerTransparent: true,
-              gestureEnabled: true,
-              tabBarIcon: initIcon("barchart", "AntDesign"),
-            }}
-          >
-            {(props) => <Top {...props} navigationRef={navigationRef} />}
-          </Tab.Screen>
         <Tab.Screen
-            name="menuPage"
+          {...getTabProps("menuPage", "リンク", "radio", "Ionicons")}
-            options={{
-              tabBarLabel: "リンク",
-              headerTransparent: true,
-              gestureEnabled: true,
-              tabBarIcon: initIcon("radio", "Ionicons"),
-            }}
           component={MenuPage}
         />
 
         <Tab.Screen
-            name="home"
+          {...getTabProps(
-            options={{
+            "home",
-              tabBarLabel: "運行情報",
+            "運行情報",
-              headerTransparent: true,
+            "train",
-              gestureEnabled: true,
+            "Ionicons",
-              tabBarIcon: initIcon("train", "Ionicons"),
+            areaInfo ? areaIconBadgeText : undefined
-              tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
+          )}
-            }}
+          children={(props) => <TNDView {...props} />}
-          >
+        />
-            {(props) => <TNDView {...props} />}
-          </Tab.Screen>
       </Tab.Navigator>
     </NavigationContainer>
   );
-  }
+}
-