アイコン処理用function分離

App.js

@@ -35,12 +35,12 @@ export default function App() {
       <Tab.Navigator>
         <Tab.Screen
           name="login"
-          component={top}
+          component={Top}
           options={{
             tabBarLabel: "位置情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <AntDesign name="barchart" size={32} />,
+            tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
         />
         <Tab.Screen
@@ -50,7 +50,7 @@ export default function App() {
             tabBarLabel: "リンク",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
+            tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
         />
         <Tab.Screen
@@ -60,21 +60,41 @@ export default function App() {
             tabBarLabel: "運行情報",
             headerTransparent: true,
             gestureEnabled: true,
-            tabBarIcon: () => <Ionicons name="md-train" size={32} />,
+            tabBarIcon: initIcon("md-train", "Ionicons"),
           }}
         />
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
-const top = ({ navigation }) => {
+
+const initIcon = (name, type, props) => {
+  switch (type) {
+    case "Ionicons":
+      return ({ focused, color, size }) => (
+        <Ionicons name={name} size={32} color={focused ? "#0099CC" : "black"} />
+      );
+    case "AntDesign":
+      return ({ focused, color, size }) => (
+        <AntDesign
+          name={name}
+          size={32}
+          color={focused ? "#0099CC" : "black"}
+        />
+      );
+  }
+};
+
+const Top = ({ navigation }) => {
   const webview = useRef();
 
   //地図用
   const [mapsStationData, setMapsStationData] = useState(undefined);
+
   useEffect(() => {
     getStationList2().then(setMapsStationData);
   }, []);
+
   useEffect(() => {
     const unsubscribe = navigation.addListener("tabLongPress", (e) => {
       navigation.navigate("favoriteList");