ちょっと整理

App.js

@@ -72,9 +72,8 @@ export function AppContainer() {
             gestureEnabled: true,
             tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
-        >
+          component={Top}
-          {(props) => <Top {...props} />}
+        />
-        </Tab.Screen>
         <Tab.Screen
           name="menuPage"
           options={{
@@ -83,9 +82,9 @@ export function AppContainer() {
             gestureEnabled: true,
             tabBarIcon: initIcon("radio", "Ionicons"),
           }}
-        >
+          component={MenuPage}
-          {(props) => <MenuPage {...props} />}
+        />
-        </Tab.Screen>
+
         <Tab.Screen
           name="home"
           options={{

MenuPage.js

@@ -13,13 +13,16 @@ import { optionData } from "./lib/stackOption.js";
 import CurrentTrainListView from "./components/CurrentTrainListView.js";
 import AllTrainDiagramView from "./components/AllTrainDiagramView.js";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
+import { useNavigation } from "@react-navigation/native";
 const Stack = createStackNavigator();
 
-export function MenuPage({ navigation }) {
+export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { getCurrentTrain } = useCurrentTrain();
+  const navigation = useNavigation();
+  const { addListener } = navigation;
   useEffect(() => {
-    const unsubscribe = navigation.addListener("tabPress", (e) => {
+    const unsubscribe = addListener("tabPress", (e) => {
       AS.getItem("favoriteStation")
         .then((d) => {
           const returnData = JSON.parse(d);
@@ -41,57 +44,29 @@ export function MenuPage({ navigation }) {
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      >
+        children={() => <Menu getCurrentTrain={getCurrentTrain} />}
-        {(props) => <Menu {...props} getCurrentTrain={getCurrentTrain} />}
+      />
-      </Stack.Screen>
+      <Stack.Screen name="setting" options={optionData} component={Setting} />
-      <Stack.Screen name="setting" options={optionData}>
-        {(props) => <Setting {...props} />}
-      </Stack.Screen>
       <Stack.Screen
         name="trainbase"
-        options={{
+        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
-          ...TransitionPresets.ModalPresentationIOS,
+        children={(props) => <TrainBase {...props} />}
-          cardOverlayEnabled: true,
+      />
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-          gestureResponseDistance: { vertical: 300 },
-        }}
-      >
-        {(props) => <TrainBase {...props} />}
-      </Stack.Screen>
       <Stack.Screen
         name="currentTrainIDList"
-        options={{
+        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
-          ...TransitionPresets.ModalPresentationIOS,
+        component={CurrentTrainListView}
-          cardOverlayEnabled: true,
+      />
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-          gestureResponseDistance: { vertical: 300 },
-        }}
-      >
-        {(props) => <CurrentTrainListView {...props} />}
-      </Stack.Screen>
       <Stack.Screen
         name="AllTrainIDList"
-        options={{
+        options={{ ...optionData, gestureEnabled: false }}
-          ...TransitionPresets.ModalPresentationIOS,
+        component={AllTrainDiagramView}
-          cardOverlayEnabled: true,
+      />
-          headerShown: false,
-          headerTransparent: true,
-        }}
-      >
-        {(props) => <AllTrainDiagramView {...props} />}
-      </Stack.Screen>
       <Stack.Screen
         name="howto"
-        options={{
+        options={optionData}
-          ...optionData,
+        children={(props) => <HowTo {...props} />}
-        }}
+      />
-      >
-        {(props) => <HowTo {...props} />}
-      </Stack.Screen>
     </Stack.Navigator>
   );
 }

Top.js

@@ -11,8 +11,11 @@ import News from "./components/news.js";
 import TrainMenu from "./components/trainMenu.js";
 import FavoriteList from "./components/FavoriteList.js";
 import { optionData } from "./lib/stackOption.js";
+import { useNavigation } from "@react-navigation/native";
 const Stack = createStackNavigator();
-export const Top = ({ navigation }) => {
+export const Top = () => {
+  const navigation = useNavigation();
+  const { navigate, addListener } = navigation;
   //地図用
   const [mapsStationData, setMapsStationData] = useState(undefined);
 
@@ -21,9 +24,9 @@ export const Top = ({ navigation }) => {
   }, []);
 
   useEffect(() => {
-    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
+    const unsubscribe = addListener("tabLongPress", (e) =>
-      navigation.navigate("favoriteList");
+      navigate("favoriteList")
-    });
+    );
 
     return unsubscribe;
   }, [navigation]);

components/AllTrainDiagramView.js

@@ -1,30 +1,23 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useState, useEffect } from "react";
 import {
   View,
   Text,
   TouchableOpacity,
-  Linking,
-  ScrollView,
   FlatList,
   KeyboardAvoidingView,
   TextInput,
   Platform,
   Keyboard,
 } from "react-native";
-import MapView, { Marker } from "react-native-maps";
-import { MaterialCommunityIcons } from "@expo/vector-icons";
-import { useCurrentTrain } from "../stateBox/useCurrentTrain";
-import { useAreaInfo } from "../stateBox/useAreaInfo";
 import { useAllTrainDiagram } from "../stateBox/useAllTrainDiagram";
 
 import { customTrainDataDetector } from "./custom-train-data";
-import { getStationList, lineList } from "../lib/getStationList";
+import { getStationList } from "../lib/getStationList";
 import { getTrainType } from "../lib/getTrainType";
-import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData";
 import { SheetManager } from "react-native-actions-sheet";
-export default function AllTrainDiagramView({ navigation: { navigate } }) {
+import { useNavigation } from "@react-navigation/native";
-  const { currentTrain } = useCurrentTrain();
+export default function AllTrainDiagramView() {
-  const { areaInfo } = useAreaInfo();
+  const { navigate } = useNavigation();
   const { allTrainDiagram } = useAllTrainDiagram();
   const [originalStationList, setOriginalStationList] = useState(); // 第一要素
   const [keyList, setKeyList] = useState(); // 第二要素

components/CurrentTrainListView.js

@@ -3,7 +3,9 @@ import { View, Text, TouchableOpacity, Linking } from "react-native";
 import MapView, { Marker } from "react-native-maps";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
-export default function CurrentTrainListView({ navigation: { navigate } }) {
+import { useNavigation } from "@react-navigation/native";
+export default function CurrentTrainListView() {
+  const { navigate } = useNavigation();
   const { currentTrain } = useCurrentTrain();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>

components/settings.js

@@ -7,10 +7,7 @@ import { AS } from "../storageControl";
 var Status = StatusbarDetect();
 import { Switch } from "react-native-elements";
 
-export default function Setting(props) {
+export default function Setting() {
-  const {
-    navigation: { navigate },
-  } = props;
   const [iconSetting, setIconSetting] = useState(false);
   const [mapSwitch, setMapSwitch] = useState(false);
   const [stationMenu, setStationMenu] = useState(false);

menu.js

@@ -37,12 +37,10 @@ import { HeaderConfig } from "./lib/HeaderConfig";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { SheetManager } from "react-native-actions-sheet";
 import { useTrainDelayData } from "./stateBox/useTrainDelayData";
+import { useNavigation } from "@react-navigation/native";
 
-export default function Menu(props) {
+export default function Menu({ getCurrentTrain }) {
-  const {
+  const { navigate } = useNavigation();
-    navigation: { navigate },
-    getCurrentTrain,
-  } = props;
   const { favoriteStation } = useFavoriteStation();
 
   //位置情報

trainbaseview.js

@@ -8,10 +8,11 @@ import {
 } from "react-native";
 import { WebView } from "react-native-webview";
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
+import { useNavigation } from "@react-navigation/native";
 
-export default function TrainBase({ route, navigation }) {
+export default function TrainBase({ route }) {
   const { info, from } = route.params;
-  const { navigate } = navigation;
+  const { navigate } = useNavigation();
   const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${