From 5373d4f69161b589d814f4f6ef9ecf463669f743 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Thu, 29 Aug 2024 17:29:59 +0000 Subject: [PATCH] =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E5=88=86=E9=9B=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Top.js | 12 +-- components/Apps.js | 149 ++++-------------------------------- components/Apps/NewMenu.tsx | 92 ++++++++++++++++++++++ stateBox/useTrainMenu.js | 92 +++++++++++++++++++++- 4 files changed, 199 insertions(+), 146 deletions(-) create mode 100644 components/Apps/NewMenu.tsx diff --git a/Top.js b/Top.js index 65d389a..18f9538 100644 --- a/Top.js +++ b/Top.js @@ -21,19 +21,14 @@ export const Top = ({ navigationRef }) => { const { navigate, addListener } = useNavigation(); //地図用 - const { setMapsStationData, injectJavaScript, setInjectJavaScript } = - useTrainMenu(); + const { injectJavaScript, setInjectJavaScript } = useTrainMenu(); - useEffect(() => { - getStationList2().then(setMapsStationData); - }, []); - const [mapSwitch, setMapSwitch] = React.useState("false"); + const [mapSwitch, setMapSwitch] = useState("false"); useEffect(() => { //地図スイッチ ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" }); }, []); - const goToFavoriteList = () => navigate("favoriteList"); useEffect(() => { @@ -41,7 +36,6 @@ export const Top = ({ navigationRef }) => { return unsubscribe; }, [{ navigate, addListener }]); - const goToTrainMenu = () => { if (navigationRef.current?.getCurrentRoute().name == "Apps") { if (mapSwitch == "true") { @@ -60,7 +54,7 @@ export const Top = ({ navigationRef }) => { navigate("Apps"); } }; - + useEffect(() => { const unsubscribe = addListener("tabPress", goToTrainMenu); return unsubscribe; diff --git a/components/Apps.js b/components/Apps.js index 1b33f12..2df3147 100644 --- a/components/Apps.js +++ b/components/Apps.js @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from "react"; +import React from "react"; import { View, Platform, @@ -11,10 +11,7 @@ import Constants from "expo-constants"; import { Ionicons } from "@expo/vector-icons"; import * as Updates from "expo-updates"; -import { AS, ASCore } from "../storageControl"; -import { news } from "../config/newsUpdate"; -import { getStationList, lineList } from "../lib/getStationList"; -import { injectJavascriptData } from "../lib/webViewInjectjavascript"; +import { lineList } from "../lib/getStationList"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange"; import { SheetManager } from "react-native-actions-sheet"; @@ -24,6 +21,7 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain import { useNavigation } from "@react-navigation/native"; import { useTrainMenu } from "../stateBox/useTrainMenu"; import { AppsWebView } from "./Apps/WebView"; +import { NewMenu } from "./Apps/NewMenu"; /* import StatusbarDetect from '../StatusbarDetect'; var Status = StatusbarDetect(); */ @@ -36,53 +34,15 @@ export default function Apps() { const { navigate } = useNavigation(); const { isLandscape } = useDeviceOrientationChange(); const handleLayout = () => {}; - const { setInjectJavaScript, mapsStationData } = useTrainMenu(); - - //画面表示関連 - const [iconSetting, setIconSetting] = useState(undefined); - const [mapSwitch, setMapSwitch] = useState(undefined); - const [stationMenu, setStationMenu] = useState(undefined); - const [LoadError, setLoadError] = useState(false); - - //列車情報表示関連 - const [trainInfo, setTrainInfo] = useState({ - trainNum: undefined, - limited: undefined, - trainData: undefined, - }); - - //駅情報画面用 - const [originalStationList, setOriginalStationList] = useState(); - const [trainMenu, setTrainMenu] = useState("true"); - useEffect(() => getStationList().then(setOriginalStationList), []); - - //地図表示テキスト - const injectJavascript = injectJavascriptData( + const { setInjectJavaScript, mapsStationData, mapSwitch, - iconSetting, - stationMenu, - trainMenu - ); + LoadError, + setLoadError, + trainInfo, + setTrainInfo, + originalStationList, + injectJavascript, } = useTrainMenu(); - useEffect(() => { - //ニュース表示 - AS.getItem("status") - .then((d) => { - if (d != news) navigate("news"); - }) - .catch(() => navigate("news")); - }, []); - - useEffect(() => { - //列車アイコンスイッチ - ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true }); - //地図スイッチ - ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true }); - //駅メニュースイッチ - ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true }); - //列車メニュースイッチ - ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true }); - }, []); const openStationACFromEachTrainInfo = async (stationName) => { await SheetManager.hide("EachTrainInfo"); @@ -100,8 +60,8 @@ export default function Apps() { if (returnDataBase.length) { const payload = { currentStation: returnDataBase, - originalStationList: originalStationList, - navigate: navigate, + originalStationList, + navigate, goTo: "Apps", useShow: () => SheetManager.show("StationDetailView", { payload }), onExit: () => SheetManager.hide("StationDetailView"), @@ -134,8 +94,8 @@ export default function Apps() { ) : null} {/* {Status} */} ); } -const NewMenu = ({ LoadError }) => { - const { webview } = useCurrentTrain(); - const { width } = useWindowDimensions(); - return ( - - { - webview.current?.injectJavaScript(`AccordionClassEvent()`); - }} - > - <> - - - - - - - メニュー - - - - Updates.reloadAsync()} - style={{ - width: 54, - height: 54, - backgroundColor: LoadError ? "red" : "#0099CC", - borderColor: "white", - borderStyle: "solid", - borderWidth: 1, - alignContent: "center", - alignSelf: "center", - alignItems: "center", - }} - > - - - - - - ); -}; const MapsButton = ({ onPress, mapSwitch }) => { const styles = { touch: { diff --git a/components/Apps/NewMenu.tsx b/components/Apps/NewMenu.tsx new file mode 100644 index 0000000..d2e4a8f --- /dev/null +++ b/components/Apps/NewMenu.tsx @@ -0,0 +1,92 @@ +import React from "react"; +import { View, Text, TouchableOpacity, useWindowDimensions, Platform } from "react-native"; +import { Ionicons } from "@expo/vector-icons"; +import * as Updates from "expo-updates"; +import Constants from "expo-constants"; +import { useCurrentTrain } from "../../stateBox/useCurrentTrain"; + +const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0; +export const NewMenu = ({ LoadError }) => { + const { webview } = useCurrentTrain(); + const { width } = useWindowDimensions(); + return ( + + { + webview.current?.injectJavaScript(`AccordionClassEvent()`); + }} + > + <> + + + + + + + メニュー + + + + + Updates.reloadAsync()} + style={{ + width: 54, + height: 54, + backgroundColor: LoadError ? "red" : "#0099CC", + borderColor: "white", + borderStyle: "solid", + borderWidth: 1, + alignContent: "center", + alignSelf: "center", + alignItems: "center", + }} + > + + + + + + ); + }; \ No newline at end of file diff --git a/stateBox/useTrainMenu.js b/stateBox/useTrainMenu.js index efbc979..fe5bf33 100644 --- a/stateBox/useTrainMenu.js +++ b/stateBox/useTrainMenu.js @@ -1,4 +1,11 @@ -import React, { createContext, useContext, useState } from "react"; +import React, { createContext, useContext, useState, useEffect } from "react"; + +import { AS, ASCore } from "../storageControl"; + +import { getStationList } from "../lib/getStationList"; +import { getStationList2 } from "../lib/getStationList2"; +import { injectJavascriptData } from "../lib/webViewInjectjavascript"; + const initialState = { selectedLine: undefined, setSelectedLine: () => {}, @@ -6,6 +13,25 @@ const initialState = { setMapsStationData: () => {}, injectJavaScript: "", setInjectJavaScript: () => {}, + iconSetting: undefined, + setIconSetting: () => {}, + mapSwitch: undefined, + setMapSwitch: () => {}, + stationMenu: undefined, + setStationMenu: () => {}, + LoadError: false, + setLoadError: () => {}, + trainInfo: { + trainNum: undefined, + limited: undefined, + trainData: undefined, + }, + setTrainInfo: () => {}, + originalStationList: undefined, + setOriginalStationList: () => {}, + trainMenu: "true", + setTrainMenu: () => {}, + injectJavascript: "", }; const TrainMenuContext = createContext(initialState); @@ -19,6 +45,54 @@ export const TrainMenuProvider = ({ children }) => { const [mapsStationData, setMapsStationData] = useState(undefined); const [injectJavaScript, setInjectJavaScript] = useState(); + useEffect(() => getStationList2().then(setMapsStationData), []); + + //画面表示関連 + const [iconSetting, setIconSetting] = useState(undefined); + const [mapSwitch, setMapSwitch] = useState(undefined); + const [stationMenu, setStationMenu] = useState(undefined); + const [LoadError, setLoadError] = useState(false); + + //列車情報表示関連 + const [trainInfo, setTrainInfo] = useState({ + trainNum: undefined, + limited: undefined, + trainData: undefined, + }); + + //駅情報画面用 + const [originalStationList, setOriginalStationList] = useState(); + const [trainMenu, setTrainMenu] = useState("true"); + useEffect(() => getStationList().then(setOriginalStationList), []); + + //地図表示テキスト + const injectJavascript = injectJavascriptData( + mapSwitch, + iconSetting, + stationMenu, + trainMenu + ); + + useEffect(() => { + //ニュース表示 + AS.getItem("status") + .then((d) => { + if (d != news) navigate("news"); + }) + .catch(() => navigate("news")); + }, []); + + useEffect(() => { + //列車アイコンスイッチ + ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true }); + //地図スイッチ + ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true }); + //駅メニュースイッチ + ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true }); + //列車メニュースイッチ + ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true }); + }, []); + return ( { setMapsStationData, injectJavaScript, setInjectJavaScript, + + iconSetting, + setIconSetting, + mapSwitch, + setMapSwitch, + stationMenu, + setStationMenu, + LoadError, + setLoadError, + trainInfo, + setTrainInfo, + originalStationList, + setOriginalStationList, + trainMenu, + setTrainMenu, + injectJavascript, }} > {children}