From 556b04e3b09e11458860263d9b89a679c094f3fc Mon Sep 17 00:00:00 2001
From: harukin-DeskMini <harukin@haruk.in>
Date: Mon, 30 Jan 2023 02:51:57 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E7=94=A8function=E5=88=86=E9=9B=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.js | 30 +++++++++++++++++++++++++-----
 1 file changed, 25 insertions(+), 5 deletions(-)

diff --git a/App.js b/App.js
index 04675dc..d17f794 100644
--- a/App.js
+++ b/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");