navigationの制御方式多少変更

App.js

@@ -10,12 +10,12 @@ import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
 import Apps from "./Apps";
 import tndView from "./ndView";
-import trainbase from "./trainbaseview";
+import TrainBase from "./trainbaseview";
-import howto from "./howto";
+import HowTo from "./howto";
 import menu from "./menu";
 import News from "./components/news.js";
 import Setting from "./components/settings.js";
-import trainMenu from "./components/trainMenu.js";
+import TrainMenu from "./components/trainMenu.js";
 import FavoriteList from "./components/FavoriteList.js";
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
@@ -25,14 +25,14 @@ if (Platform.OS === "android") {
   }
 }
 export default function App() {
-  const navigationRef = useRef();
   useEffect(() => {
     UpdateAsync();
   }, []);
+
   return (
-    <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
+    <NavigationContainer name="Root" style={{ flex: 1 }}>
       <Tab.Navigator>
-        <Stack.Screen
+        <Tab.Screen
           name="login"
           component={top}
           options={{
@@ -42,7 +42,7 @@ export default function App() {
             tabBarIcon: () => <AntDesign name="barchart" size={32} />,
           }}
         />
-        <Stack.Screen
+        <Tab.Screen
           name="menuPage"
           component={menuPage}
           options={{
@@ -52,7 +52,7 @@ export default function App() {
             tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
           }}
         />
-        <Stack.Screen
+        <Tab.Screen
           name="home"
           component={tndView}
           options={{
@@ -66,43 +66,63 @@ export default function App() {
     </NavigationContainer>
   );
 }
-const top = () => (
+const top = ({ navigation }) => {
-  <Stack.Navigator>
+  useEffect(() => {
-    <Stack.Screen
+    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
-      name="Apps"
+      alert("longPress!");
-      component={Apps}
+      navigation.navigate("favoriteList", { webview, stationData });
-      options={{
+    });
-        headerShown: false,
+
-        gestureEnabled: true,
+    return unsubscribe;
-        headerTransparent: true,
+  }, [navigation]);
-      }}
+
-    />
+  const webview = useRef();
-    <Stack.Screen
+  return (
-      name="trainbase"
+    <Stack.Navigator>
-      component={trainbase}
+      <Stack.Screen
-      options={{
+        name="Apps"
-        title: "トレインビジョン",
+        options={{
-        gestureEnabled: true,
+          headerShown: false,
-        ...TransitionPresets.SlideFromRightIOS,
+          gestureEnabled: true,
-      }}
+          headerTransparent: true,
-    />
+        }}
-    <Stack.Screen
+      >
-      name="howto"
+        {(props) => <Apps {...props} webview={webview} />}
-      component={howto}
+      </Stack.Screen>
-      options={{
+      <Stack.Screen
-        title: "使い方",
+        name="trainbase"
-        ...optionData,
+        options={{
-      }}
+          title: "トレインビジョン",
-    />
+          gestureEnabled: true,
-    <Stack.Screen name="news" component={News} options={optionData} />
+          ...TransitionPresets.SlideFromRightIOS,
-    <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
+        }}
-    <Stack.Screen
+      >
-      name="favoriteList"
+        {(props) => <TrainBase {...props} webview={webview} />}
-      component={FavoriteList}
+      </Stack.Screen>
-      options={{ ...optionData, gestureEnabled: false }}
+      <Stack.Screen
-    />
+        name="howto"
-  </Stack.Navigator>
+        options={{
-);
+          title: "使い方",
+          ...optionData,
+        }}
+      >
+        {(props) => <HowTo {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="news" options={optionData}>
+        {(props) => <News {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="trainMenu" options={optionData}>
+        {(props) => <TrainMenu {...props} webview={webview} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="favoriteList"
+        options={{ ...optionData, gestureEnabled: false }}
+      >
+        {(props) => <FavoriteList {...props} webview={webview} />}
+      </Stack.Screen>
+    </Stack.Navigator>
+  );
+};
 function menuPage() {
   return (
     <Stack.Navigator>
@@ -118,7 +138,7 @@ function menuPage() {
       <Stack.Screen name="setting" component={Setting} options={optionData} />
       <Stack.Screen
         name="trainbase"
-        component={trainbase}
+        component={TrainBase}
         options={{
           ...TransitionPresets.ModalPresentationIOS,
           cardOverlayEnabled: true,

Apps.js

@@ -19,12 +19,10 @@ import { getStationList2 } from "./lib/getStationList2";
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps(props) {
+export default function Apps({ navigation, webview }) {
-  const {
+  const { navigate } = navigation;
-    navigation: { navigate },
-  } = props;
   var urlcache = "";
-  const webview = useRef();
+
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
   const [mapSwitch, setMapSwitch] = useState(undefined);

components/trainMenu.js

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 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({
+export default function TrainMenu({
   route: {
     params: { webview, stationData },
   },