タブバーのロング押し実装に伴うnavigation手法の変更とふぁぼ画面へのクイックアクセス機能整備

App.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { NavigationContainer } from "@react-navigation/native";
 import {
   createStackNavigator,
@@ -8,6 +8,7 @@ import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
+import { getStationList2 } from "./lib/getStationList2";
 import Apps from "./Apps";
 import tndView from "./ndView";
 import TrainBase from "./trainbaseview";
@@ -67,16 +68,21 @@ export default function App() {
   );
 }
 const top = ({ navigation }) => {
+  const webview = useRef();
+
+  //地図用
+  const [mapsStationData, setMapsStationData] = useState(undefined);
+  useEffect(() => {
+    getStationList2().then(setMapsStationData);
+  }, []);
   useEffect(() => {
     const unsubscribe = navigation.addListener("tabLongPress", (e) => {
-      alert("longPress!");
+      navigation.navigate("favoriteList");
-      navigation.navigate("favoriteList", { webview, stationData });
     });
 
     return unsubscribe;
   }, [navigation]);
 
-  const webview = useRef();
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -112,13 +118,25 @@ const top = ({ navigation }) => {
         {(props) => <News {...props} />}
       </Stack.Screen>
       <Stack.Screen name="trainMenu" options={optionData}>
-        {(props) => <TrainMenu {...props} webview={webview} />}
+        {(props) => (
+          <TrainMenu
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+          />
+        )}
       </Stack.Screen>
       <Stack.Screen
         name="favoriteList"
         options={{ ...optionData, gestureEnabled: false }}
       >
-        {(props) => <FavoriteList {...props} webview={webview} />}
+        {(props) => (
+          <FavoriteList
+            {...props}
+            webview={webview}
+            stationData={mapsStationData}
+          />
+        )}
       </Stack.Screen>
     </Stack.Navigator>
   );

Apps.js

@@ -28,12 +28,6 @@ export default function Apps({ navigation, webview }) {
   const [mapSwitch, setMapSwitch] = useState(undefined);
   const [stationMenu, setStationMenu] = useState(undefined);
 
-  //地図用
-  const [mapsStationData, setMapsStationData] = useState(undefined);
-  useEffect(() => {
-    getStationList2().then(setMapsStationData);
-  }, []);
-
   //駅情報画面用
   const StationBoardAcSR = useRef(null);
   const [stationBoardData, setStationBoardData] = useState(undefined);
@@ -185,9 +179,7 @@ export default function Apps({ navigation, webview }) {
         onTouchMove={() => StationBoardAcSR.current?.hide()}
       />
       <MapsButton
-        onPress={() =>
+        onPress={() => navigate("trainMenu", { webview })}
-          navigate("trainMenu", { webview, stationData: mapsStationData })
-        }
         top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
         mapSwitch={mapSwitch == "true" ? "flex" : "none"}
       />

components/FavoriteList.js

@@ -8,14 +8,8 @@ import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
 import { getStationList, lineList } from "../lib/getStationList";
 var Status = StatusbarDetect();
-export default function FavoriteList(props) {
+export default function FavoriteList({ navigation, webview, stationData }) {
-  const {
+  const { navigate } = navigation;
-    route: {
-      params: { webview, stationData },
-    },
-    navigation: { navigate },
-  } = props;
-
   const [favoriteStation, setFavoriteStation] = useState([]);
 
   useEffect(() => {
@@ -31,6 +25,17 @@ export default function FavoriteList(props) {
 
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <Text
+        style={{
+          textAlign: "center",
+          fontSize: 25,
+          color: "white",
+          fontWeight: "bold",
+          paddingVertical: 10,
+        }}
+      >
+        位置情報クイック移動メニュー
+      </Text>
       <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
         {favoriteStation
           .filter((d) => d[0].StationMap)
@@ -100,9 +105,7 @@ export default function FavoriteList(props) {
           borderRadius: 5,
           alignItems: "center",
         }}
-        onPress={() => {
+        onPress={() => navigation.goBack()}
-          navigate("trainMenu");
-        }}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>

components/trainMenu.js

@@ -3,10 +3,9 @@ import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 export default function TrainMenu({
-  route: {
-    params: { webview, stationData },
-  },
   navigation: { navigate },
+  webview,
+  stationData,
 }) {
   const mapRef = useRef();
   return (
@@ -67,9 +66,7 @@ export default function TrainMenu({
           backgroundColor={"#EA4752"}
           icon="star"
           flex={1}
-          onPressButton={() =>
+          onPressButton={() => navigate("favoriteList")}
-            navigate("favoriteList", { webview, stationData })
-          }
         >
           お気に入り
         </UsefulBox>
@@ -96,9 +93,7 @@ export default function TrainMenu({
           borderRadius: 5,
           alignItems: "center",
         }}
-        onPress={() => {
+        onPress={() => navigate("Apps")}
-          navigate("Apps");
-        }}
       >
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>