位置情報と地図フィルタリング機能の協調化

Apps.js

@@ -39,7 +39,7 @@ export default function Apps({ stationData }) {
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  const { setSelectedLine } = useTrainMenu();
+  const { setSelectedLine, setInjectJavaScript } = useTrainMenu();
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -332,7 +332,10 @@ export default function Apps({ stationData }) {
       )}
       {isLandscape || (
         <MapsButton
-          onPress={() => navigate("trainMenu", { webview })}
+          onPress={() => {
+            setInjectJavaScript("");
+            navigate("trainMenu", { webview });
+          }}
           top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
           mapSwitch={mapSwitch == "true" ? "flex" : "none"}
         />

Top.js

@@ -17,12 +17,17 @@ import { AS } from "./storageControl.js";
 import { useTrainMenu } from "./stateBox/useTrainMenu";
 const Stack = createStackNavigator();
 export const Top = ({ navigationRef }) => {
-  const { webview, getCurrentTrain } = useCurrentTrain();
+  const { webview } = useCurrentTrain();
   const navigation = useNavigation();
   const { navigate, addListener } = navigation;
 
   //地図用
-  const { mapsStationData, setMapsStationData } = useTrainMenu();
+  const {
+    mapsStationData,
+    setMapsStationData,
+    injectJavaScript,
+    setInjectJavaScript,
+  } = useTrainMenu();
 
   useEffect(() => {
     getStationList2().then(setMapsStationData);
@@ -48,15 +53,20 @@ export const Top = ({ navigationRef }) => {
       if (navigationRef.current?.getCurrentRoute().name == "Apps") {
         if (mapSwitch == "true") {
           navigation.navigate("trainMenu");
+          setInjectJavaScript("");
         } else {
           webview.current?.injectJavaScript(`AccordionClassEvent()`);
         }
       } else {
+        if (mapSwitch == "true") {
+          if (injectJavaScript)
+            webview.current?.injectJavaScript(injectJavaScript);
+        }
         navigation.navigate("Apps");
       }
     });
     return unsubscribe;
-  }, [navigation, mapSwitch]);
+  }, [navigation, mapSwitch, injectJavaScript]);
 
   return (
     <Stack.Navigator>
@@ -85,7 +95,7 @@ export const Top = ({ navigationRef }) => {
       <Stack.Screen
         name="trainMenu"
         options={optionData}
-        children={() => <TrainMenu stationData={mapsStationData} />}
+        children={() => <TrainMenu />}
       />
 
       <Stack.Screen

components/trainMenu.js

@@ -10,15 +10,21 @@ import { stationIDPair } from "../lib/getStationList2";
 import { lineListPair } from "../lib/getStationList";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
-export default function TrainMenu({ stationData, style }) {
+export default function TrainMenu({ style }) {
   const { webview } = useCurrentTrain();
   const mapRef = useRef();
   const { navigate } = useNavigation();
   const [stationPin, setStationPin] = useState([]);
-  const { selectedLine, setSelectedLine } = useTrainMenu();
+  const {
+    selectedLine,
+    setSelectedLine,
+    injectJavaScript,
+    setInjectJavaScript,
+    mapsStationData: stationData,
+  } = useTrainMenu();
   useEffect(() => {
     const stationPinData = [];
-    Object.keys(stationData).map((d, indexBase) =>
+    Object.keys(stationData).map((d, indexBase) => {
       stationData[d].map((D, index) => {
         if (!D.StationMap) return null;
         if (selectedLine && selectedLine != d) return;
@@ -27,9 +33,14 @@ export default function TrainMenu({ stationData, style }) {
           ""
         ).split(",");
         if (latlng.length == 0) return null;
+        if (index == 0 && stationPin.length > 0) {
+          setInjectJavaScript(
+            `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}');`
+          );
+        }
         stationPinData.push({ D, d, latlng, indexBase: 0, index });
-      })
-    );
+      });
+    });
     setStationPin(stationPinData);
   }, [stationData, selectedLine]);
   useEffect(() => {
@@ -185,7 +196,14 @@ export default function TrainMenu({ stationData, style }) {
           </UsefulBox>
         </View>
       )}
-      <MapsButton onPress={() => navigate("Apps")} top={0} mapSwitch={"flex"} />
+      <MapsButton
+        onPress={() => {
+          navigate("Apps");
+          webview.current?.injectJavaScript(injectJavaScript);
+        }}
+        top={0}
+        mapSwitch={"flex"}
+      />
     </View>
   );
 }

stateBox/useTrainMenu.js

@@ -4,6 +4,8 @@ const initialState = {
   setSelectedLine: () => {},
   mapsStationData: undefined,
   setMapsStationData: () => {},
+  injectJavaScript: "",
+  setInjectJavaScript: () => {},
 };
 
 const TrainMenuContext = createContext(initialState);
@@ -15,6 +17,7 @@ export const useTrainMenu = () => {
 export const TrainMenuProvider = ({ children }) => {
   const [selectedLine, setSelectedLine] = useState(undefined);
   const [mapsStationData, setMapsStationData] = useState(undefined);
+  const [injectJavaScript, setInjectJavaScript] = useState();
 
   return (
     <TrainMenuContext.Provider
@@ -23,6 +26,8 @@ export const TrainMenuProvider = ({ children }) => {
         setSelectedLine,
         mapsStationData,
         setMapsStationData,
+        injectJavaScript,
+        setInjectJavaScript,
       }}
     >
       {children}