Merge commit 'c30d593838271dceff6887366962866c55478c9f' into patch/5.0.x

2024-03-26 12:50:25 +00:00 · 2024-03-26 12:50:25 +00:00 · ecb4ed9607
commit ecb4ed9607
parent 8a5251462a c30d593838
19 changed files with 573 additions and 657 deletions
--- a/App.js
+++ b/App.js
@ -72,9 +72,8 @@ export function AppContainer() {
            gestureEnabled: true,
            tabBarIcon: initIcon("barchart", "AntDesign"),
          }}
-        >
-          {(props) => <Top {...props} />}
-        </Tab.Screen>
+          component={Top}
+        />
        <Tab.Screen
          name="menuPage"
          options={{
@ -83,9 +82,9 @@ export function AppContainer() {
            gestureEnabled: true,
            tabBarIcon: initIcon("radio", "Ionicons"),
          }}
-        >
-          {(props) => <MenuPage {...props} />}
-        </Tab.Screen>
+          component={MenuPage}
+        />
+
        <Tab.Screen
          name="home"
          options={{
--- a/Apps.js
+++ b/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 }) {
-  const { currentTrain } = useCurrentTrain();
+export default function Apps({ stationData }) {
+  const { webview, currentTrain } = useCurrentTrain();
  const { height, width } = useWindowDimensions();
-  const { navigate } = navigation;
+  const { navigate } = useNavigation();
  var urlcache = "";
  const { favoriteStation } = useFavoriteStation();
  const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
@ -309,11 +311,11 @@ export default function Apps({ navigation, webview, stationData }) {
          <EachTrainInfoCore
            {...{
              data: trainInfo.trainNum ? trainInfo : undefined,
-              navigate,
              originalStationList,
              openStationACFromEachTrainInfo,
              from: "Train",
              setTrainInfo,
+              navigate,
            }}
          />
        </View>
--- a/MenuPage.js
+++ b/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,
        }}
-      >
-        {(props) => <Menu {...props} getCurrentTrain={getCurrentTrain} />}
-      </Stack.Screen>
-      <Stack.Screen name="setting" options={optionData}>
-        {(props) => <Setting {...props} />}
-      </Stack.Screen>
+        children={() => <Menu getCurrentTrain={getCurrentTrain} />}
+      />
+      <Stack.Screen name="setting" options={optionData} component={Setting} />
      <Stack.Screen
        name="trainbase"
-        options={{
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-          gestureResponseDistance: { vertical: 300 },
-        }}
-      >
-        {(props) => <TrainBase {...props} />}
-      </Stack.Screen>
+        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
+        children={(props) => <TrainBase {...props} />}
+      />
      <Stack.Screen
        name="currentTrainIDList"
-        options={{
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerShown: false,
-          gestureEnabled: true,
-          headerTransparent: true,
-          gestureResponseDistance: { vertical: 300 },
-        }}
-      >
-        {(props) => <CurrentTrainListView {...props} />}
-      </Stack.Screen>
+        options={{ ...optionData, gestureResponseDistance: { vertical: 300 } }}
+        component={CurrentTrainListView}
+      />
      <Stack.Screen
        name="AllTrainIDList"
-        options={{
-          ...TransitionPresets.ModalPresentationIOS,
-          cardOverlayEnabled: true,
-          headerShown: false,
-          headerTransparent: true,
-        }}
-      >
-        {(props) => <AllTrainDiagramView {...props} />}
-      </Stack.Screen>
+        options={{ ...optionData, gestureEnabled: false }}
+        component={AllTrainDiagramView}
+      />
      <Stack.Screen
        name="howto"
-        options={{
-          ...optionData,
-        }}
-      >
-        {(props) => <HowTo {...props} />}
-      </Stack.Screen>
+        options={optionData}
+        children={(props) => <HowTo {...props} />}
+      />
    </Stack.Navigator>
  );
 }
--- a/Top.js
+++ b/Top.js
@ -10,14 +10,12 @@ 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";
+import { useNavigation } from "@react-navigation/native";
 const Stack = createStackNavigator();
-export const Top = ({ navigation }) => {
-  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
-  const { webview, getCurrentTrain } = useCurrentTrain();
-
+export const Top = () => {
+  const navigation = useNavigation();
+  const { navigate, addListener } = navigation;
  //地図用
  const [mapsStationData, setMapsStationData] = useState(undefined);

@ -26,9 +24,9 @@ export const Top = ({ navigation }) => {
  }, []);

  useEffect(() => {
-    const unsubscribe = navigation.addListener("tabLongPress", (e) => {
-      navigation.navigate("favoriteList");
-    });
+    const unsubscribe = addListener("tabLongPress", (e) =>
+      navigate("favoriteList")
+    );

    return unsubscribe;
  }, [navigation]);
@ -42,16 +40,8 @@ export const Top = ({ navigation }) => {
          gestureEnabled: true,
          headerTransparent: true,
        }}
-      >
-        {(props) => (
-          <Apps
-            {...props}
-            webview={webview}
-            stationData={mapsStationData}
-            getCurrentTrain={getCurrentTrain}
+        children={() => <Apps stationData={mapsStationData} />}
      />
-        )}
-      </Stack.Screen>
      <Stack.Screen
        name="trainbase"
        options={{
@ -59,41 +49,23 @@ export const Top = ({ navigation }) => {
          gestureEnabled: true,
          ...TransitionPresets.SlideFromRightIOS,
        }}
-      >
-        {(props) => <TrainBase {...props} />}
-      </Stack.Screen>
-      <Stack.Screen
-        name="howto"
-        options={{
-          ...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}
-            stationData={mapsStationData}
+        component={TrainBase}
      />
-        )}
-      </Stack.Screen>
+
+      <Stack.Screen name="howto" options={optionData} component={HowTo} />
+      <Stack.Screen name="news" options={optionData} component={News} />
+
+      <Stack.Screen
+        name="trainMenu"
+        options={optionData}
+        children={() => <TrainMenu stationData={mapsStationData} />}
+      />
+
      <Stack.Screen
        name="favoriteList"
        options={{ ...optionData, gestureEnabled: false }}
-      >
-        {(props) => (
-          <FavoriteList
-            {...props}
-            webview={webview}
-            stationData={mapsStationData}
+        children={() => <FavoriteList stationData={mapsStationData} />}
      />
-        )}
-      </Stack.Screen>
    </Stack.Navigator>
  );
 };
--- a/components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.js
+++ b/components/ActionSheetComponents/EachTrainInfo/ShowSpecialTrain.js
@ -0,0 +1,36 @@
+import { Text, TouchableOpacity } from "react-native";
+import React, { useState } from "react";
+export const ShowSpecialTrain = ({
+  isTrainDataNothing,
+  setTrainData,
+  trainList,
+  trueTrainID,
+}) => {
+  const replaceSpecialTrainDetail = (trainNum) => {
+    let TD = trainList[trainNum];
+    if (!TD) return;
+    setTrainData(TD.split("#").filter((d) => d != ""));
+  };
+  return (
+    <>
+      {isTrainDataNothing && trueTrainID && (
+        <TouchableOpacity
+          onPress={() => replaceSpecialTrainDetail(trueTrainID)}
+          style={{
+            padding: 10,
+            flexDirection: "row",
+            borderColor: "blue",
+            borderWidth: 1,
+            margin: 10,
+            borderRadius: 5,
+            alignItems: "center",
+          }}
+        >
+          <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
+            本来の列車情報を表示
+          </Text>
+        </TouchableOpacity>
+      )}
+    </>
+  );
+};
--- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
+++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
@ -5,6 +5,7 @@ import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientati
 import { getStationList2 } from "../../../lib/getStationList2";
 import { useCurrentTrain } from "../../../stateBox/useCurrentTrain";
 import { SheetManager } from "react-native-actions-sheet";
+import { useNavigation } from "@react-navigation/native";

 export const TrainDataView = ({
  currentTrainData,
@ -43,7 +44,10 @@ export const TrainDataView = ({
                test.push({ line: d, station: x });
            });
            if (currentPosition[0] == "M12") {
-              test.push({ line: "seto", station: {Station_JP: "児島", MyStation: "0"}});
+              test.push({
+                line: "seto",
+                station: { Station_JP: "児島", MyStation: "0" },
+              });
            }
          });
          if (!test.length) return;
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/components/ActionSheetComponents/EachTrainInfoCore.js
@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
  View,
  LayoutAnimation,
@ -9,7 +9,7 @@ import {
  BackHandler,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
-import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
+import { SheetManager } from "react-native-actions-sheet";
 import { AS } from "../../storageControl";
 import trainList from "../../assets/originData/trainList";
 import { lineList } from "../../lib/getStationList";
@ -31,25 +31,25 @@ import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainNam
 import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
 import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
+import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
+import { useNavigation } from "@react-navigation/native";

 export const EachTrainInfoCore = ({
  actionSheetRef,
  data,
-  navigate,
  originalStationList,
  openStationACFromEachTrainInfo,
  from,
  setTrainInfo,
+  navigate,
 }) => {
  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
-
  const { currentTrain } = useCurrentTrain();
  const [currentTrainData, setCurrentTrainData] = useState();

  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);

  useEffect(() => {
-    console.log(currentTrain.length);
    if (!currentTrain.length) return;
    setCurrentTrainData(
      checkDuplicateTrainData(
@ -69,7 +69,6 @@ export const EachTrainInfoCore = ({
    );
    return () => backHandler.remove();
  }, []);
-  //bconst insets = useSafeAreaInsets();

  const [headStation, setHeadStation] = useState([]);
  const [tailStation, setTailStation] = useState([]);
@ -80,9 +79,6 @@ export const EachTrainInfoCore = ({
  const [trainPositionSwitch, setTrainPositionSwitch] = useState("false");
  const [currentPosition, setCurrentPosition] = useState([]);
  const [trainData, setTrainData] = useState([]);
-  const scrollHandlers = actionSheetRef
-    ? useScrollHandlers("scrollview-1", actionSheetRef)
-    : null;

  const stationList =
    originalStationList &&
@ -112,6 +108,28 @@ export const EachTrainInfoCore = ({
    trainPositionSwitch == "true"
      ? findReversalPoints(currentPosition, stopStationIDList)
      : [];
+  const trainName = useMemo(() => {
+    if (!data.limited) return "";
+    const limitedArray = data.limited.split(":");
+    const type = getType(limitedArray[0]);
+
+    switch (true) {
+      case limitedArray[1]:
+        // 特急の場合は、列車名を取得
+        return type + migrateTrainName(limitedArray[1]);
+      case trainData.length == 0:
+        // 特急以外の場合は、列車番号を取得
+        return type;
+      default:
+        // 行先がある場合は、行先を取得
+        return (
+          type +
+          migrateTrainName(
+            trainData[trainData.length - 1].split(",")[0] + "行き"
+          )
+        );
+    }
+  }, [data.limited, trainData]);

  const { height, width } = useWindowDimensions();
  const { isLandscape } = useDeviceOrientationChange();
@ -184,12 +202,6 @@ export const EachTrainInfoCore = ({
    }
  }, [currentTrainData]);

-  const replaceSpecialTrainDetail = (trainNum) => {
-    let TD = trainList[trainNum];
-    if (!TD) return;
-    setTrainData(TD.split("#").filter((d) => d != ""));
-  };
-
  useEffect(() => {
    //列車現在地アイコン表示スイッチ
    AS.getItem("trainPositionSwitch")
@ -254,15 +266,7 @@ export const EachTrainInfoCore = ({
      )}
      <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
-          {data.limited
-            ? getType(data.limited.split(":")[0]) +
-              migrateTrainName(
-                data.limited.split(":")[1] ||
-                  (trainData.length > 0
-                    ? trainData[trainData.length - 1].split(",")[0] + "行き"
-                    : " ")
-              )
-            : ""}
+          {trainName}
        </Text>
        <View style={{ flex: 1 }} />
        <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
@ -291,33 +295,15 @@ export const EachTrainInfoCore = ({
          )}
      </View>
      <DynamicHeaderScrollView
+        from={from}
        styles={styles}
-        scrollViewProps={scrollHandlers}
+        actionSheetRef={actionSheetRef}
        containerProps={{
          style: {
            maxHeight: isLandscape ? height - 94 : (height / 100) * 70,
          },
        }}
-        Max_Header_Height={
-          from == "AllTrainDiagramView" ||
-          from == "NearTrainDiagramView" ||
-          from == "LED2"
-            ? 0
-            : 200
-        }
-        Min_Header_Height={
-          from == "AllTrainDiagramView" ||
-          from == "NearTrainDiagramView" ||
-          from == "LED2"
-            ? 0
-            : 80
-        }
        shortHeader={
-          from == "AllTrainDiagramView" ||
-          from == "NearTrainDiagramView" ||
-          from == "LED2" ? (
-            <></>
-          ) : (
          <ShortHeader
            currentTrainData={currentTrainData}
            currentPosition={currentPosition}
@ -325,12 +311,8 @@ export const EachTrainInfoCore = ({
            openTrainInfo={openTrainInfo}
            navigate={navigate}
          />
-          )
        }
        longHeader={
-          from == "AllTrainDiagramView" || from == "NearTrainDiagramView" ? (
-            <></>
-          ) : (
          <LongHeader
            currentTrainData={currentTrainData}
            currentPosition={currentPosition}
@ -338,7 +320,6 @@ export const EachTrainInfoCore = ({
            openTrainInfo={openTrainInfo}
            navigate={navigate}
          />
-          )
        }
        topStickyContent={
          <ScrollStickyContent currentTrainData={currentTrainData} />
@ -374,31 +355,12 @@ export const EachTrainInfoCore = ({
              <></>
            )
          )}
-        {/* <LottieView
-                autoPlay
-                loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                source={require("../../assets/51690-loading-diamonds.json")}
+        <ShowSpecialTrain
+          isTrainDataNothing={trainData.length == 0}
+          setTrainData={setTrainData}
+          trainList={trainList}
+          trueTrainID={trueTrainID}
        />
-              <Text>ほげほげふがふが</Text> */}
-        {trainData.length == 0 && trueTrainID && (
-          <TouchableOpacity
-            onPress={() => replaceSpecialTrainDetail(trueTrainID)}
-            style={{
-              padding: 10,
-              flexDirection: "row",
-              borderColor: "blue",
-              borderWidth: 1,
-              margin: 10,
-              borderRadius: 5,
-              alignItems: "center",
-            }}
-          >
-            <Text style={{ fontSize: 18, fontWeight: "bold", color: "black" }}>
-              本来の列車情報を表示
-            </Text>
-          </TouchableOpacity>
-        )}
        {trainData.map((i, index) =>
          i.split(",")[1] == "提" ? (
            <DataFromButton i={i} />
--- a/components/AllTrainDiagramView.js
+++ b/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 } }) {
-  const { currentTrain } = useCurrentTrain();
-  const { areaInfo } = useAreaInfo();
+import { useNavigation } from "@react-navigation/native";
+export default function AllTrainDiagramView() {
+  const { navigate } = useNavigation();
  const { allTrainDiagram } = useAllTrainDiagram();
  const [originalStationList, setOriginalStationList] = useState(); // 第一要素
  const [keyList, setKeyList] = useState(); // 第二要素
--- a/components/CurrentTrainListView.js
+++ b/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" }}>
--- a/components/DynamicHeaderScrollView.js
+++ b/components/DynamicHeaderScrollView.js
@ -1,22 +1,39 @@
 import { ScrollView, View, Animated, LayoutAnimation } from "react-native";
-import React, { useState } from "react";
+import React, { useMemo, useState } from "react";
+import { useScrollHandlers } from "react-native-actions-sheet";

 export const DynamicHeaderScrollView = (props) => {
  const {
-    Max_Header_Height = 200,
-    Min_Header_Height = 80,
    children,
-    scrollViewProps = {},
+    actionSheetRef = {},
    containerProps = {},
    shortHeader = <></>,
    longHeader = <></>,
    topStickyContent,
    styles,
+    from,
  } = props;

+  const viewHeader = useMemo(() => {
+    switch (from) {
+      case "AllTrainDiagramView":
+      case "NearTrainDiagramView":
+      case "LED2":
+        return true;
+      default:
+        return false;
+    }
+  }, [from]);
+
+  const Max_Header_Height = viewHeader ? 0 : 200;
+  const Min_Header_Height = viewHeader ? 0 : 80;
+
  const Scroll_Distance = Max_Header_Height - Min_Header_Height;

-  const [headerVisible, setHeaderVisible] = useState(false);
+  const scrollHandlers = actionSheetRef
+    ? useScrollHandlers("scrollview-1", actionSheetRef)
+    : null;
+
  const shotHeaderStyle = {
    on: {
      height: Min_Header_Height,
@ -67,6 +84,18 @@ export const DynamicHeaderScrollView = (props) => {
    },
  };

+  const [headerVisible, setHeaderVisible] = useState(false);
+
+  const onScroll = (event) => {
+    const scrollY = event.nativeEvent.contentOffset.y;
+    if (Scroll_Distance < scrollY == headerVisible) return;
+    LayoutAnimation.configureNext({
+      duration: 100,
+      update: { type: "easeOut" },
+    });
+    setHeaderVisible(Scroll_Distance < scrollY);
+  };
+
  return (
    <View {...containerProps}>
      <View style={{ zIndex: 1 }}>
@ -76,7 +105,7 @@ export const DynamicHeaderScrollView = (props) => {
            headerVisible ? shotHeaderStyle.on : shotHeaderStyle.off,
          ]}
        >
-          {shortHeader}
+          {viewHeader ? <></> : shortHeader}
        </Animated.View>
        <Animated.View
          style={[
@ -84,35 +113,20 @@ export const DynamicHeaderScrollView = (props) => {
            headerVisible ? longHeaderStyle.off : longHeaderStyle.on,
          ]}
        >
-          {longHeader}
+          {viewHeader ? <></> : longHeader}
        </Animated.View>
        <Animated.View style={headerVisible ? StickyStyle.off : StickyStyle.on}>
          {topStickyContent}
        </Animated.View>
      </View>
      <ScrollView
-        {...scrollViewProps}
-        style={{
-          backgroundColor: "white",
-          zIndex: 0,
-        }}
+        {...scrollHandlers}
+        style={{ backgroundColor: "white", zIndex: 0 }}
        stickyHeaderIndices={[1]}
        scrollEventThrottle={16}
-        onScroll={(event) => {
-          const scrollY = event.nativeEvent.contentOffset.y;
-          LayoutAnimation.configureNext({
-            duration: 100,
-            update: { type: "easeOut" },
-          });
-          setHeaderVisible(Scroll_Distance < scrollY);
-        }}
+        onScroll={onScroll}
      >
-        <View
-          style={{
-            height: Scroll_Distance,
-            flexDirection: "column",
-          }}
-        />
+        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
        {topStickyContent && (
          <View
            style={{
--- a/components/FavoriteList.js
+++ b/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 }) {
-  const { navigate } = navigation;
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+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" }}>
--- a/components/Menu/FixedContentBottom.js
+++ b/components/Menu/FixedContentBottom.js
@ -0,0 +1,314 @@
+import { Linking, Text, View, TouchableOpacity } from "react-native";
+import {
+  Foundation,
+  FontAwesome,
+  Ionicons,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import Icon from "react-native-vector-icons/Entypo";
+import { TextBox } from "../atom/TextBox";
+import { TicketBox } from "../atom/TicketBox";
+import { ListItem } from "native-base";
+
+export const FixedContentBottom = (props) => {
+  return (
+    <>
+      {props.children}
+
+      <View style={{ flexDirection: "row" }}>
+        <TicketBox
+          backgroundColor={"#AD7FA8"}
+          icon={<Foundation name="ticket" color="white" size={50} />}
+          flex={1}
+          onPressButton={() =>
+            Linking.openURL("https://www.jr-eki.com/ticket/brand")
+          }
+        >
+          トクトク切符
+        </TicketBox>
+        <TicketBox
+          backgroundColor={"#8F5902"}
+          icon={<FontAwesome name="first-order" color="white" size={50} />}
+          flex={1}
+          onPressButton={() =>
+            Linking.openURL(
+              "https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
+            )
+          }
+        >
+          観光列車
+        </TicketBox>
+        <TicketBox
+          backgroundColor={"#888A85"}
+          icon={<Ionicons name="flag" color="white" size={50} />}
+          flex={1}
+          onPressButton={() =>
+            Linking.openURL("https://www.jr-eki.com/tour/brand")
+          }
+        >
+          旅行ツアー
+        </TicketBox>
+      </View>
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          スマートえきちゃん
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          JR四国のチケットレススマホアプリです。
+        </Text>
+      </TextBox>
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          臨時列車などのお知らせ
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          区間縮小・計画運休・イベント・季節臨時列車など
+        </Text>
+      </TextBox>
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          ニュースリリース
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          公式プレス記事はこちら
+        </Text>
+      </TextBox>
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          定期運賃計算
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          通常/学生/快て〜き等はこちら
+        </Text>
+      </TextBox>
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          JR四国のお店・サービス
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          JR四国グループの施設をご案内
+        </Text>
+      </TextBox>
+      <View style={{ flexDirection: "row" }}>
+        <TouchableOpacity
+          style={{
+            flex: 1,
+            backgroundColor: "#729FCF",
+            borderColor: "#0099CC",
+            padding: 10,
+            borderWidth: 1,
+            margin: 2,
+            alignItems: "center",
+          }}
+          onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
+        >
+          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+            時刻・運賃計算
+          </Text>
+          <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+            (マイ・ダイヤ)
+          </Text>
+          <Foundation name="yen" color="white" size={50} />
+          <Text style={{ color: "white" }}>
+            マイ・ダイヤはJR西日本提供のサービスです。
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={{
+            flex: 1,
+            backgroundColor: "#8AE234",
+            borderColor: "#0099CC",
+            padding: 10,
+            borderWidth: 1,
+            margin: 2,
+            alignItems: "center",
+          }}
+          onPress={() => Linking.openURL("tel:0570-00-4592")}
+        >
+          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+            JR四国案内センター
+          </Text>
+          <Foundation name="telephone" color="white" size={50} />
+          <Text style={{ color: "white" }}>0570-00-4592</Text>
+          <Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
+          <Text style={{ color: "white" }}>(通話料がかかります)</Text>
+        </TouchableOpacity>
+      </View>
+      <View
+        style={{
+          backgroundColor: "#0099CC",
+          borderRadius: 10,
+          margin: 10,
+          borderColor: "black",
+          borderWidth: 2,
+        }}
+      >
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <MaterialCommunityIcons
+            name="twitter"
+            style={{ padding: 5 }}
+            color="white"
+            size={30}
+          />
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            JR四国公式Twitter一族
+          </Text>
+        </View>
+        <View
+          style={{
+            padding: 10,
+            backgroundColor: "white",
+            borderBottomLeftRadius: 10,
+            borderBottomRightRadius: 10,
+          }}
+        >
+          {[
+            {
+              url: "https://twitter.com/jr_shikoku_info",
+              name: "ＪＲ四国列車運行情報",
+            },
+
+            {
+              url: "https://twitter.com/JRshikoku_eigyo",
+              name: "JR四国営業部【公式】",
+            },
+            {
+              url: "https://twitter.com/JRshikoku_tokyo",
+              name: "JR四国 東京営業情報【公式】",
+            },
+            {
+              url: "https://twitter.com/JRshikoku_osaka",
+              name: "JR四国 大阪営業部【公式】",
+            },
+            {
+              url: "https://twitter.com/jrs_matsuyama",
+              name: "JR四国 松山駅 【公式】",
+            },
+            {
+              url: "https://twitter.com/jrshikoku_kochi",
+              name: "JR四国 高知駅【公式】",
+            },
+            {
+              url: "https://twitter.com/jr_tokust",
+              name: "JR四国 徳島駅【公式】",
+            },
+            {
+              url: "https://twitter.com/jrshikoku_uwjm",
+              name: "JR四国 宇和島駅【公式】",
+            },
+            {
+              url: "https://twitter.com/jrshikoku_wkama",
+              name: "JR四国 ワープ高松支店【公式】",
+            },
+            {
+              url: "https://twitter.com/JRshikoku_wkoch",
+              name: "JR四国 ワープ高知支店【公式】",
+            },
+            {
+              url: "https://twitter.com/Yoakemonogatari",
+              name: "志国土佐　時代の夜明けのものがたり【公式】",
+            },
+            {
+              url: "https://twitter.com/Smile_Eki_Chan",
+              name: "すまいるえきちゃん♡JR四国【公式】",
+            },
+            {
+              url: "https://twitter.com/sper_ponchan",
+              name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
+            },
+          ].map((d) => (
+            <ListItem onPress={() => Linking.openURL(d.url)}>
+              <Text>{d.name}</Text>
+              <View style={{ flex: 1 }} />
+              <Icon name="chevron-right" size={20} />
+            </ListItem>
+          ))}
+        </View>
+      </View>
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
+      <TextBox
+        backgroundColor="#8c00d6"
+        flex={1}
+        onPressButton={() => props.navigate("AllTrainIDList")}
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          列番探索
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          データベースに存在する全列車のダイヤを探索
+        </Text>
+      </TextBox>
+      <Text style={{ fontWeight: "bold", fontSize: 20 }}>
+        このアプリについて
+      </Text>
+      <Text>
+        このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
+      </Text>
+
+      <TextBox
+        backgroundColor="#CC0000"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL("https://twitter.com/Xprocess_main")
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          XprocessのTwitter
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          制作運営のTwitterです。
+        </Text>
+      </TextBox>
+      <TextBox
+        backgroundColor="black"
+        flex={1}
+        onPressButton={() => props.navigate("setting")}
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          アプリの設定
+        </Text>
+        <Text style={{ color: "white", fontSize: 18 }}>
+          アプリの設定画面を表示します。
+        </Text>
+      </TextBox>
+      {/* 
+    <SvgUri
+      width="200"
+      height="200"
+      source={require("./assets/トレインビジョン関係/1.svg")}
+    /> */}
+    </>
+  );
+};
--- a/components/Menu/TitleBar.js
+++ b/components/Menu/TitleBar.js
@ -0,0 +1,19 @@
+import { View, TouchableOpacity, Linking } from "react-native";
+import AutoHeightImage from "react-native-auto-height-image";
+import { widthPercentageToDP as wp } from "react-native-responsive-screen";
+
+export const TitleBar = () => {
+  return (
+    <View style={{ alignItems: "center" }}>
+      <TouchableOpacity
+        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
+      >
+        <AutoHeightImage
+          source={require("../../assets/Header.png")}
+          resizeMode="contain"
+          width={wp("100%")}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
--- a/components/news.js
+++ b/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) {
-  const {
-    navigation: { navigate },
-  } = props;
+export default function News() {
+  const { navigate } = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
      <WebView
--- a/components/settings.js
+++ b/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) {
-  const {
-    navigation: { navigate },
-  } = props;
+export default function Setting() {
  const [iconSetting, setIconSetting] = useState(false);
  const [mapSwitch, setMapSwitch] = useState(false);
  const [stationMenu, setStationMenu] = useState(false);
--- a/components/trainMenu.js
+++ b/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({
-  navigation: { navigate },
-  webview,
-  stationData,
-  style,
-}) {
+import { useCurrentTrain } from "../stateBox/useCurrentTrain";
+import { useNavigation } from "@react-navigation/native";
+export default function TrainMenu({ stationData, style }) {
+  const { webview } = useCurrentTrain();
  const mapRef = useRef();
+  const { navigate } = useNavigation();
  return (
    <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
      <MapView
--- a/menu.js
+++ b/menu.js
@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import Carousel from "react-native-snap-carousel";
 import {
  Platform,
@ -9,40 +9,30 @@ import {
  TouchableOpacity,
 } from "react-native";
 import Constants from "expo-constants";
-import { ListItem } from "native-base";
-import Icon from "react-native-vector-icons/Entypo";
 import * as Location from "expo-location";
 import StatusbarDetect from "./StatusbarDetect";
-import AutoHeightImage from "react-native-auto-height-image";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
-import {
-  FontAwesome,
-  Foundation,
-  Ionicons,
-  MaterialCommunityIcons,
-} from "@expo/vector-icons";
+import { Ionicons } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
 import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
 import trainList from "./assets/originData/trainList";

 import LED_vision from "./components/発車時刻表/LED_vidion";
 import Sign from "./components/駅名表/Sign";
+import { TitleBar } from "./components/Menu/TitleBar";
+import { FixedContentBottom } from "./components/Menu/FixedContentBottom";

 import { UsefulBox } from "./components/atom/UsefulBox";
-import { TicketBox } from "./components/atom/TicketBox";
-import { TextBox } from "./components/atom/TextBox";
 import { getStationList, lineList } from "./lib/getStationList";
 import useInterval from "./lib/useInterval";
 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) {
-  const {
-    navigation: { navigate },
-    getCurrentTrain,
-  } = props;
+export default function Menu({ getCurrentTrain }) {
+  const { navigate } = useNavigation();
  const { favoriteStation } = useFavoriteStation();

  //位置情報
@ -148,30 +138,6 @@ export default function Menu(props) {
        setTrainDiagram(trainList);
      });
  }, []);
-
-  const openStationACFromEachTrainInfo = () => {
-    // EachTrainInfoAsSR.current?.hide();
-    // const findStationEachLine = (selectLine) => {
-    //   let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
-    //   return NearStation;
-    // };
-    // let returnDataBase = lineList
-    //   .map((d) => findStationEachLine(originalStationList[d]))
-    //   .filter((d) => d.length > 0)
-    //   .reduce((pre, current) => {
-    //     pre.push(...current);
-    //     return pre;
-    //   }, []);
-    // if (returnDataBase.length) {
-    //   setStationBoardData(returnDataBase);
-    //   sleep(30, function () {
-    //     StationBoardAcSR.current?.show();
-    //   });
-    // } else {
-    //   setStationBoardData(undefined);
-    //   StationBoardAcSR.current?.hide();
-    // }
-  };
  return (
    <View
      style={{
@ -183,7 +149,7 @@ export default function Menu(props) {
      <StatusbarDetect />
      <TitleBar />
      <ScrollView>
-        <FixedContentTop navigate={navigate} />
+        <TopMenuButton />
        {originalStationList.length != 0 && allStationData.length != 0 && (
          <Carousel
            ref={carouselRef}
@ -244,7 +210,7 @@ export default function Menu(props) {
              getCurrentTrain={getCurrentTrain}
              navigate={navigate}
              originalStationList={originalStationList}
-              openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
+              openStationACFromEachTrainInfo={() => {}}
            />
          )}
        <JRSTraInfoBox />
@ -254,22 +220,6 @@ export default function Menu(props) {
  );
 }

-const TitleBar = () => {
-  return (
-    <View style={{ alignItems: "center" }}>
-      <TouchableOpacity
-        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
-      >
-        <AutoHeightImage
-          source={require("./assets/Header.png")}
-          resizeMode="contain"
-          width={wp("100%")}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
 const TopMenuButton = () => {
  const buttonList = [
    {
@ -418,313 +368,3 @@ const JRSTraInfoBox = () => {
    </TouchableOpacity>
  );
 };
-
-const FixedContentTop = () => {
-  return (
-    <>
-      <TopMenuButton />
-    </>
-  );
-};
-const FixedContentBottom = (props) => {
-  return (
-    <>
-      {props.children}
-
-      <View style={{ flexDirection: "row" }}>
-        <TicketBox
-          backgroundColor={"#AD7FA8"}
-          icon={<Foundation name="ticket" color="white" size={50} />}
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL("https://www.jr-eki.com/ticket/brand")
-          }
-        >
-          トクトク切符
-        </TicketBox>
-        <TicketBox
-          backgroundColor={"#8F5902"}
-          icon={<FontAwesome name="first-order" color="white" size={50} />}
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL(
-              "https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
-            )
-          }
-        >
-          観光列車
-        </TicketBox>
-        <TicketBox
-          backgroundColor={"#888A85"}
-          icon={<Ionicons name="flag" color="white" size={50} />}
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL("https://www.jr-eki.com/tour/brand")
-          }
-        >
-          旅行ツアー
-        </TicketBox>
-      </View>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://www.jr-eki.com/smart-eki/index.html")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          スマートえきちゃん
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          JR四国のチケットレススマホアプリです。
-        </Text>
-      </TextBox>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          臨時列車などのお知らせ
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          区間縮小・計画運休・イベント・季節臨時列車など
-        </Text>
-      </TextBox>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          ニュースリリース
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          公式プレス記事はこちら
-        </Text>
-      </TextBox>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          定期運賃計算
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          通常/学生/快て〜き等はこちら
-        </Text>
-      </TextBox>
-      <TextBox
-        backgroundColor="#0099CC"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          JR四国のお店・サービス
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          JR四国グループの施設をご案内
-        </Text>
-      </TextBox>
-      <View style={{ flexDirection: "row" }}>
-        <TouchableOpacity
-          style={{
-            flex: 1,
-            backgroundColor: "#729FCF",
-            borderColor: "#0099CC",
-            padding: 10,
-            borderWidth: 1,
-            margin: 2,
-            alignItems: "center",
-          }}
-          onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
-        >
-          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-            時刻・運賃計算
-          </Text>
-          <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-            (マイ・ダイヤ)
-          </Text>
-          <Foundation name="yen" color="white" size={50} />
-          <Text style={{ color: "white" }}>
-            マイ・ダイヤはJR西日本提供のサービスです。
-          </Text>
-        </TouchableOpacity>
-        <TouchableOpacity
-          style={{
-            flex: 1,
-            backgroundColor: "#8AE234",
-            borderColor: "#0099CC",
-            padding: 10,
-            borderWidth: 1,
-            margin: 2,
-            alignItems: "center",
-          }}
-          onPress={() => Linking.openURL("tel:0570-00-4592")}
-        >
-          <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-            JR四国案内センター
-          </Text>
-          <Foundation name="telephone" color="white" size={50} />
-          <Text style={{ color: "white" }}>0570-00-4592</Text>
-          <Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
-          <Text style={{ color: "white" }}>(通話料がかかります)</Text>
-        </TouchableOpacity>
-      </View>
-      <View
-        style={{
-          backgroundColor: "#0099CC",
-          borderRadius: 10,
-          margin: 10,
-          borderColor: "black",
-          borderWidth: 2,
-        }}
-      >
-        <View
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-        >
-          <MaterialCommunityIcons
-            name="twitter"
-            style={{ padding: 5 }}
-            color="white"
-            size={30}
-          />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            JR四国公式Twitter一族
-          </Text>
-        </View>
-        <View
-          style={{
-            padding: 10,
-            backgroundColor: "white",
-            borderBottomLeftRadius: 10,
-            borderBottomRightRadius: 10,
-          }}
-        >
-          {[
-            {
-              url: "https://twitter.com/jr_shikoku_info",
-              name: "ＪＲ四国列車運行情報",
-            },
-
-            {
-              url: "https://twitter.com/JRshikoku_eigyo",
-              name: "JR四国営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_tokyo",
-              name: "JR四国 東京営業情報【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_osaka",
-              name: "JR四国 大阪営業部【公式】",
-            },
-            {
-              url: "https://twitter.com/jrs_matsuyama",
-              name: "JR四国 松山駅 【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_kochi",
-              name: "JR四国 高知駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jr_tokust",
-              name: "JR四国 徳島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_uwjm",
-              name: "JR四国 宇和島駅【公式】",
-            },
-            {
-              url: "https://twitter.com/jrshikoku_wkama",
-              name: "JR四国 ワープ高松支店【公式】",
-            },
-            {
-              url: "https://twitter.com/JRshikoku_wkoch",
-              name: "JR四国 ワープ高知支店【公式】",
-            },
-            {
-              url: "https://twitter.com/Yoakemonogatari",
-              name: "志国土佐　時代の夜明けのものがたり【公式】",
-            },
-            {
-              url: "https://twitter.com/Smile_Eki_Chan",
-              name: "すまいるえきちゃん♡JR四国【公式】",
-            },
-            {
-              url: "https://twitter.com/sper_ponchan",
-              name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
-            },
-          ].map((d) => (
-            <ListItem onPress={() => Linking.openURL(d.url)}>
-              <Text>{d.name}</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-          ))}
-        </View>
-      </View>
-      <Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
-      <TextBox
-        backgroundColor="#8c00d6"
-        flex={1}
-        onPressButton={() => props.navigate("AllTrainIDList")}
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          列番探索
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          データベースに存在する全列車のダイヤを探索
-        </Text>
-      </TextBox>
-      <Text style={{ fontWeight: "bold", fontSize: 20 }}>
-        このアプリについて
-      </Text>
-      <Text>
-        このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
-      </Text>
-
-      <TextBox
-        backgroundColor="#CC0000"
-        flex={1}
-        onPressButton={() =>
-          Linking.openURL("https://twitter.com/Xprocess_main")
-        }
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          XprocessのTwitter
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          制作運営のTwitterです。
-        </Text>
-      </TextBox>
-      <TextBox
-        backgroundColor="black"
-        flex={1}
-        onPressButton={() => props.navigate("setting")}
-      >
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          アプリの設定
-        </Text>
-        <Text style={{ color: "white", fontSize: 18 }}>
-          アプリの設定画面を表示します。
-        </Text>
-      </TextBox>
-      {/* 
-  <SvgUri
-    width="200"
-    height="200"
-    source={require("./assets/トレインビジョン関係/1.svg")}
-  /> */}
-    </>
-  );
-};
--- a/ndView.js
+++ b/ndView.js
@ -5,7 +5,10 @@ import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
 export default function tndView() {
  const webview = useRef();
-  const [LoadError, setLoadError] = useState(false);
+  const jsa = `
+  document.querySelector('.sitettl').style.display = 'none';	
+  document.querySelector('.attention').style.display = 'none';
+  `;
  return (
    <View
      style={{
@ -23,27 +26,18 @@ export default function tndView() {
        javaScriptEnabled={true}
        injectedJavaScript={jsa}
        pullToRefreshEnabled
-        onError={(syntheticEvent) => {
-          //webViewの再読み込みを行う
-          this.webView.reload();
-        }}
+        onError={() => this.webView?.reload()}
      />
      <ReloadButton
-        onPress={() => webview.current.reload()}
+        onPress={() => webview.current?.reload()}
        top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
-        LoadError={LoadError}
      />
    </View>
  );
 }
-const jsa = `
-document.querySelector('.sitettl').style.display = 'none';	
-document.querySelector('.attention').style.display = 'none';
-`;

 const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
  const styles = {
-    touch: {
    position: "absolute",
    top,
    right: 10,
@ -58,18 +52,9 @@ const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
    alignSelf: "center",
    alignItems: "center",
    display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
  };
  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
+    <TouchableOpacity onPress={onPress} style={styles}>
      <View style={{ flex: 1 }} />
      <Ionicons name="reload" color="white" size={30} />
      <View style={{ flex: 1 }} />
--- a/trainbaseview.js
+++ b/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';
  ${