Topのルーティング関係を最適化

Apps.js

@@ -23,14 +23,16 @@ import { useDeviceOrientationChange } from "./stateBox/useDeviceOrientationChang
 import { SheetManager } from "react-native-actions-sheet";
 import TrainMenu from "./components/trainMenu";
 import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
+
+import { useNavigation } from "@react-navigation/native";
 /* 
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps({ navigation, webview, stationData }) {
+export default function Apps({ stationData }) {
-  const { currentTrain } = useCurrentTrain();
+  const { webview, currentTrain } = useCurrentTrain();
   const { height, width } = useWindowDimensions();
-  const { navigate } = navigation;
+  const { navigate } = useNavigation();
   var urlcache = "";
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape, setIsLandscape } = useDeviceOrientationChange();

Top.js

@@ -10,14 +10,9 @@ import HowTo from "./howto";
 import News from "./components/news.js";
 import TrainMenu from "./components/trainMenu.js";
 import FavoriteList from "./components/FavoriteList.js";
-import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { optionData } from "./lib/stackOption.js";
-import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
 const Stack = createStackNavigator();
 export const Top = ({ navigation }) => {
-  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
-  const { webview, getCurrentTrain } = useCurrentTrain();
-
   //地図用
   const [mapsStationData, setMapsStationData] = useState(undefined);
 
@@ -42,16 +37,8 @@ export const Top = ({ navigation }) => {
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      >
+        children={() => <Apps stationData={mapsStationData} />}
-        {(props) => (
+      />
-          <Apps
-            {...props}
-            webview={webview}
-            stationData={mapsStationData}
-            getCurrentTrain={getCurrentTrain}
-          />
-        )}
-      </Stack.Screen>
       <Stack.Screen
         name="trainbase"
         options={{
@@ -59,41 +46,23 @@ export const Top = ({ navigation }) => {
           gestureEnabled: true,
           ...TransitionPresets.SlideFromRightIOS,
         }}
-      >
+        component={TrainBase}
-        {(props) => <TrainBase {...props} />}
+      />
-      </Stack.Screen>
+
+      <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen name="news" options={optionData} component={News} />
+
       <Stack.Screen
-        name="howto"
+        name="trainMenu"
-        options={{
+        options={optionData}
-          ...optionData,
+        children={() => <TrainMenu stationData={mapsStationData} />}
-        }}
+      />
-      >
+
-        {(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}
-            stationData={mapsStationData}
-          />
-        )}
-      </Stack.Screen>
       <Stack.Screen
         name="favoriteList"
         options={{ ...optionData, gestureEnabled: false }}
-      >
+        children={() => <FavoriteList stationData={mapsStationData} />}
-        {(props) => (
+      />
-          <FavoriteList
-            {...props}
-            webview={webview}
-            stationData={mapsStationData}
-          />
-        )}
-      </Stack.Screen>
     </Stack.Navigator>
   );
 };

components/FavoriteList.js

@@ -3,9 +3,12 @@ import { View, Text, TouchableOpacity, ScrollView } from "react-native";
 import { ListItem } from "native-base";
 import Icon from "react-native-vector-icons/Entypo";
 import { useFavoriteStation } from "../stateBox/useFavoriteStation";
-export default function FavoriteList({ navigation, webview, stationData }) {
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
-  const { navigate } = navigation;
+import { useNavigation } from "@react-navigation/native";
+export default function FavoriteList({ stationData }) {
   const { favoriteStation } = useFavoriteStation();
+  const { webview } = useCurrentTrain();
+  const { navigate } = useNavigation();
 
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>

components/news.js

@@ -4,11 +4,10 @@ import { WebView } from "react-native-webview";
 import StatusbarDetect from "../StatusbarDetect";
 import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
+import { useNavigation } from "@react-navigation/native";
 var Status = StatusbarDetect();
-export default function News(props) {
+export default function News() {
-  const {
+  const { navigate } = useNavigation();
-    navigation: { navigate },
-  } = props;
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <WebView

components/trainMenu.js

@@ -2,13 +2,12 @@ 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({
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
-  navigation: { navigate },
+import { useNavigation } from "@react-navigation/native";
-  webview,
+export default function TrainMenu({ stationData, style }) {
-  stationData,
+  const { webview } = useCurrentTrain();
-  style,
-}) {
   const mapRef = useRef();
+  const { navigate } = useNavigation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
       <MapView