Merge commit '736f9a65e92257237f347bbe2d02fe88f0e409d6'

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={{

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();
@@ -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>

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

@@ -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 }) => {
+export const Top = () => {
-  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
+  const navigation = useNavigation();
-  const { webview, getCurrentTrain } = useCurrentTrain();
+  const { navigate, addListener } = navigation;
-
   //地図用
   const [mapsStationData, setMapsStationData] = useState(undefined);
 
@@ -26,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]);
@@ -42,16 +40,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 +49,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/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>
+      )}
+    </>
+  );
+};

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,
@@ -42,8 +43,11 @@ export const TrainDataView = ({
               if (x.StationNumber == currentPosition[0])
                 test.push({ line: d, station: x });
             });
-            if(currentPosition[0]== "M12"){
+            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;

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
+          {trainName}
-            ? getType(data.limited.split(":")[0]) +
-              migrateTrainName(
-                data.limited.split(":")[1] ||
-                  (trainData.length > 0
-                    ? trainData[trainData.length - 1].split(",")[0] + "行き"
-                    : " ")
-              )
-            : ""}
         </Text>
         <View style={{ flex: 1 }} />
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
@@ -291,54 +295,31 @@ 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" ||
+          <ShortHeader
-          from == "NearTrainDiagramView" ||
+            currentTrainData={currentTrainData}
-          from == "LED2" ? (
+            currentPosition={currentPosition}
-            <></>
+            nearTrainIDList={nearTrainIDList}
-          ) : (
+            openTrainInfo={openTrainInfo}
-            <ShortHeader
+            navigate={navigate}
-              currentTrainData={currentTrainData}
+          />
-              currentPosition={currentPosition}
-              nearTrainIDList={nearTrainIDList}
-              openTrainInfo={openTrainInfo}
-              navigate={navigate}
-            />
-          )
         }
         longHeader={
-          from == "AllTrainDiagramView" || from == "NearTrainDiagramView" ? (
+          <LongHeader
-            <></>
+            currentTrainData={currentTrainData}
-          ) : (
+            currentPosition={currentPosition}
-            <LongHeader
+            nearTrainIDList={nearTrainIDList}
-              currentTrainData={currentTrainData}
+            openTrainInfo={openTrainInfo}
-              currentPosition={currentPosition}
+            navigate={navigate}
-              nearTrainIDList={nearTrainIDList}
+          />
-              openTrainInfo={openTrainInfo}
-              navigate={navigate}
-            />
-          )
         }
         topStickyContent={
           <ScrollStickyContent currentTrainData={currentTrainData} />
@@ -374,31 +355,12 @@ export const EachTrainInfoCore = ({
               <></>
             )
           )}
-        {/* <LottieView
+        <ShowSpecialTrain
-                autoPlay
+          isTrainDataNothing={trainData.length == 0}
-                loop
+          setTrainData={setTrainData}
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+          trainList={trainList}
-                source={require("../../assets/51690-loading-diamonds.json")}
+          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} />

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/AndroidWidget/TraInfoEXWidget.jsx

@@ -23,9 +23,10 @@ export function TraInfoEXWidget({ time, delayString }) {
           justifyContent: "center",
           alignItems: "center",
           backgroundColor: "#0099CC",
-          width: "match_parent",
+          width: "100%",
           flexDirection: "row",
-          padding: 10,
+          paddingTop: 10,
+          paddingBottom: 10,
         }}
       >
         <TextWidget
@@ -35,15 +36,19 @@ export function TraInfoEXWidget({ time, delayString }) {
             fontWeight: "bold",
             fontFamily: "Inter",
             color: "#fff",
+            textAlign: "left",
+            marginLeft: 10,
           }}
         />
         <FlexWidget style={{ flex: 1 }} />
         <TextWidget
           text={time}
           style={{
-            fontSize: 32,
+            fontSize: 30,
             fontFamily: "Inter",
             color: "#fff",
+            textAlign: "right",
+            marginRight: 10,
           }}
         />
       </FlexWidget>

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/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}
+        {...scrollHandlers}
-        style={{
+        style={{ backgroundColor: "white", zIndex: 0 }}
-          backgroundColor: "white",
-          zIndex: 0,
-        }}
         stickyHeaderIndices={[1]}
         scrollEventThrottle={16}
-        onScroll={(event) => {
+        onScroll={onScroll}
-          const scrollY = event.nativeEvent.contentOffset.y;
-          LayoutAnimation.configureNext({
-            duration: 100,
-            update: { type: "easeOut" },
-          });
-          setHeaderVisible(Scroll_Distance < scrollY);
-        }}
       >
-        <View
+        <View style={{ height: Scroll_Distance, flexDirection: "column" }} />
-          style={{
-            height: Scroll_Distance,
-            flexDirection: "column",
-          }}
-        />
         {topStickyContent && (
           <View
             style={{

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/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")}
+    /> */}
+    </>
+  );
+};

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>
+  );
+};

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/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);
@@ -174,7 +171,7 @@ export default function Setting(props) {
                 textAlignVertical: "center",
               }}
             >
-              内部バージョン: 5.0.3
+              内部バージョン: 5.0.3.1
             </Text>
             <View style={{ flex: 1 }} />
           </View>

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

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 {
+import { Ionicons } from "@expo/vector-icons";
-  FontAwesome,
-  Foundation,
-  Ionicons,
-  MaterialCommunityIcons,
-} 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) {
+export default function Menu({ getCurrentTrain }) {
-  const {
+  const { navigate } = useNavigation();
-    navigation: { navigate },
-    getCurrentTrain,
-  } = props;
   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")}
-  /> */}
-    </>
-  );
-};

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,53 +26,35 @@ export default function tndView() {
         javaScriptEnabled={true}
         injectedJavaScript={jsa}
         pullToRefreshEnabled
-        onError={(syntheticEvent) => {
+        onError={() => this.webView?.reload()}
-          //webViewの再読み込みを行う
-          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",
-      position: "absolute",
+    top,
-      top,
+    right: 10,
-      right: 10,
+    width: 50,
-      width: 50,
+    height: 50,
-      height: 50,
+    backgroundColor: LoadError ? "red" : "#0099CC",
-      backgroundColor: LoadError ? "red" : "#0099CC",
+    borderColor: "white",
-      borderColor: "white",
+    borderStyle: "solid",
-      borderStyle: "solid",
+    borderWidth: 1,
-      borderWidth: 1,
+    borderRadius: 50,
-      borderRadius: 50,
+    alignContent: "center",
-      alignContent: "center",
+    alignSelf: "center",
-      alignSelf: "center",
+    alignItems: "center",
-      alignItems: "center",
+    display: mapSwitch,
-      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 }} />

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';
   ${