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 howto from "./howto";
+import TrainBase from "./trainbaseview";
+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 = () => (
-  <Stack.Navigator>
-    <Stack.Screen
-      name="Apps"
-      component={Apps}
-      options={{
-        headerShown: false,
-        gestureEnabled: true,
-        headerTransparent: true,
-      }}
-    />
-    <Stack.Screen
-      name="trainbase"
-      component={trainbase}
-      options={{
-        title: "トレインビジョン",
-        gestureEnabled: true,
-        ...TransitionPresets.SlideFromRightIOS,
-      }}
-    />
-    <Stack.Screen
-      name="howto"
-      component={howto}
-      options={{
-        title: "使い方",
-        ...optionData,
-      }}
-    />
-    <Stack.Screen name="news" component={News} options={optionData} />
-    <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
-    <Stack.Screen
-      name="favoriteList"
-      component={FavoriteList}
-      options={{ ...optionData, gestureEnabled: false }}
-    />
-  </Stack.Navigator>
-);
+const top = ({ navigation }) => {
+  useEffect(() => {
+    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
+      alert("longPress!");
+      navigation.navigate("favoriteList", { webview, stationData });
+    });
+
+    return unsubscribe;
+  }, [navigation]);
+
+  const webview = useRef();
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Apps"
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      >
+        {(props) => <Apps {...props} webview={webview} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="trainbase"
+        options={{
+          title: "トレインビジョン",
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+        }}
+      >
+        {(props) => <TrainBase {...props} webview={webview} />}
+      </Stack.Screen>
+      <Stack.Screen
+        name="howto"
+        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,