From a4183753916662d7b4a30b576ea465b2f6b935ad Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Fri, 7 Jun 2024 07:22:24 +0000 Subject: [PATCH] =?UTF-8?q?webview=E3=81=AE=E5=88=86=E9=9B=A2=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Apps.js | 185 +++--------------------------------- components/Apps/WebView.jsx | 178 ++++++++++++++++++++++++++++++++++ 2 files changed, 189 insertions(+), 174 deletions(-) create mode 100644 components/Apps/WebView.jsx diff --git a/components/Apps.js b/components/Apps.js index 0129170..491fd25 100644 --- a/components/Apps.js +++ b/components/Apps.js @@ -7,17 +7,14 @@ import { useWindowDimensions, LayoutAnimation, } from "react-native"; -import { WebView } from "react-native-webview"; import Constants from "expo-constants"; import { Ionicons } from "@expo/vector-icons"; import * as Updates from "expo-updates"; import { AS } from "../storageControl"; import { news } from "../config/newsUpdate"; -import { getStationList, lineList, lineListPair } from "../lib/getStationList"; +import { getStationList, lineList } from "../lib/getStationList"; import { injectJavascriptData } from "../lib/webViewInjectjavascript"; -import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData"; -import { useFavoriteStation } from "../stateBox/useFavoriteStation"; import { useCurrentTrain } from "../stateBox/useCurrentTrain"; import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange"; import { SheetManager } from "react-native-actions-sheet"; @@ -26,24 +23,18 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain import { useNavigation } from "@react-navigation/native"; import { useTrainMenu } from "../stateBox/useTrainMenu"; -import { stationNamePair } from "../lib/getStationList2"; +import { AppsWebView } from "./Apps/WebView"; /* import StatusbarDetect from '../StatusbarDetect'; var Status = StatusbarDetect(); */ export default function Apps() { - const { webview, currentTrain } = useCurrentTrain(); + const { webview } = useCurrentTrain(); const { height, width } = useWindowDimensions(); const { navigate } = useNavigation(); - var urlcache = ""; - const { favoriteStation } = useFavoriteStation(); - const { isLandscape, setIsLandscape } = useDeviceOrientationChange(); + const { isLandscape } = useDeviceOrientationChange(); const handleLayout = () => {}; - const { - setSelectedLine, - setInjectJavaScript, - mapsStationData: stationData, - } = useTrainMenu(); + const { setInjectJavaScript, mapsStationData: stationData } = useTrainMenu(); //画面表示関連 const [iconSetting, setIconSetting] = useState(undefined); @@ -61,7 +52,6 @@ export default function Apps() { //駅情報画面用 const [originalStationList, setOriginalStationList] = useState(); const [trainMenu, setTrainMenu] = useState("true"); - let once = false; useEffect(() => { getStationList().then(setOriginalStationList); }, []); @@ -98,130 +88,6 @@ export default function Apps() { ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" }); }, []); - const onMessage = (event) => { - const { data } = event.nativeEvent; - if (data.includes("train.html")) { - navigate("trainbase", { info: data, from: "Train" }); - return; - } - if (!originalStationList) { - alert("駅名標データを取得中..."); - return; - } - const dataSet = JSON.parse(data); - switch (dataSet.type) { - case "LoadError": { - setLoadError(true); - return; - } - case "PopUpMenu": - { - const selectedStationPDFAddress = dataSet.pdf; - const findStationEachLine = (selectLine) => - selectLine.filter( - (d) => d.StationTimeTable == selectedStationPDFAddress - ); - let returnDataBase = lineList - .map((d) => findStationEachLine(originalStationList[d])) - .filter((d) => d.length > 0) - .reduce((pre, current) => { - pre.push(...current); - return pre; - }, []); - - if (returnDataBase.length) { - const payload = { - currentStation: returnDataBase, - originalStationList: originalStationList, - navigate: navigate, - goTo: "Apps", - useShow: () => - SheetManager.show("StationDetailView", { - payload, - }), - onExit: () => SheetManager.hide("StationDetailView"), - }; - SheetManager.show("StationDetailView", { payload }); - } - } - return; - case "ShowTrainTimeInfo": { - const { trainNum, limited } = dataSet; - //alert(trainNum, limited); - LayoutAnimation.easeInEaseOut(); - setTrainInfo({ - trainNum, - limited, - trainData: checkDuplicateTrainData( - currentTrain.filter((a) => a.num == trainNum) - ), - }); //遅延情報は未実装 - if (isLandscape) return; - const payload = { - data: { - trainNum, - limited, - }, - navigate, - originalStationList, - openStationACFromEachTrainInfo, - }; - SheetManager.show("EachTrainInfo", { - payload, - }); - return; - } - case "currentLines": { - const lineInfo = dataSet.currentLines.split("\n")[0]; - const lineID = stationNamePair[lineInfo]; - - setSelectedLine(lineID); - return; - } - default: { - return; - } - } - }; - - const onNavigationStateChange = (event) => { - if (event.url != urlcache) { - //URL二重判定回避 - urlcache = event.url; - - if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) { - if (Platform.OS === "android") navigate("howto", { info: event.url }); - webview?.current.goBack(); - //Actions.howto(); - } else if ( - event.url.includes("https://train.jr-shikoku.co.jp/train.html") - ) { - //Actions.trainbase({info: event.url}); - if (Platform.OS === "android") - navigate("trainbase", { info: event.url }); - webview?.current.goBack(); - } - } - }; - function sleep(waitSec, callbackFunc) { - // 経過時間（秒） - var spanedSec = 0; - - // 1秒間隔で無名関数を実行 - var id = setInterval(function () { - spanedSec++; - - // 経過時間 >= 待機時間の場合、待機終了。 - if (spanedSec >= waitSec) { - // タイマー停止 - clearInterval(id); - - // 完了時、コールバック関数を実行 - if (callbackFunc) callbackFunc(); - } - }, 1); - } - const openStationACFromEachTrainInfo = async (stationName) => { await SheetManager.hide("EachTrainInfo"); const findStationEachLine = (selectLine) => { @@ -271,41 +137,12 @@ export default function Apps() { /> ) : null} {/* {Status} */} - { - if (once) return () => {}; - if (!stationData) return () => {}; - if (favoriteStation.length > 0) { - const getStationLine = (now) => { - const returnData = Object.keys(stationData).filter((d) => { - const cache = stationData[d].findIndex( - (data) => data.Station_JP == now.Station_JP - ); - return cache != -1; - }); - return returnData[0]; - }; - const lineName = getStationLine(favoriteStation[0][0]); - webview.current?.injectJavaScript( - `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')` - ); - once = true; - } - }} + {isLandscape && trainInfo.trainNum && ( { + const { setLoadError } = loadErrorStatus; + const { setTrainInfo } = trainInfoStatus; + const { webview, currentTrain } = useCurrentTrain(); + const { navigate } = useNavigation(); + const { favoriteStation } = useFavoriteStation(); + const { isLandscape } = useDeviceOrientationChange(); + var urlcache = ""; + let once = false; + const { setSelectedLine, mapsStationData: stationData } = useTrainMenu(); + + const onNavigationStateChange = (event) => { + if (event.url != urlcache) { + //URL二重判定回避 + urlcache = event.url; + + if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) { + if (Platform.OS === "android") navigate("howto", { info: event.url }); + webview?.current.goBack(); + //Actions.howto(); + } else if ( + event.url.includes("https://train.jr-shikoku.co.jp/train.html") + ) { + //Actions.trainbase({info: event.url}); + if (Platform.OS === "android") + navigate("trainbase", { info: event.url }); + webview?.current.goBack(); + } + } + }; + + const onMessage = (event) => { + const { data } = event.nativeEvent; + if (data.includes("train.html")) { + navigate("trainbase", { info: data, from: "Train" }); + return; + } + if (!originalStationList) { + alert("駅名標データを取得中..."); + return; + } + const dataSet = JSON.parse(data); + switch (dataSet.type) { + case "LoadError": { + setLoadError(true); + return; + } + case "PopUpMenu": + { + const selectedStationPDFAddress = dataSet.pdf; + const findStationEachLine = (selectLine) => + selectLine.filter( + (d) => d.StationTimeTable == selectedStationPDFAddress + ); + let returnDataBase = lineList + .map((d) => findStationEachLine(originalStationList[d])) + .filter((d) => d.length > 0) + .reduce((pre, current) => { + pre.push(...current); + return pre; + }, []); + + if (returnDataBase.length) { + const payload = { + currentStation: returnDataBase, + originalStationList: originalStationList, + navigate: navigate, + goTo: "Apps", + useShow: () => + SheetManager.show("StationDetailView", { + payload, + }), + onExit: () => SheetManager.hide("StationDetailView"), + }; + SheetManager.show("StationDetailView", { payload }); + } + } + return; + case "ShowTrainTimeInfo": { + const { trainNum, limited } = dataSet; + //alert(trainNum, limited); + LayoutAnimation.easeInEaseOut(); + setTrainInfo({ + trainNum, + limited, + trainData: checkDuplicateTrainData( + currentTrain.filter((a) => a.num == trainNum) + ), + }); //遅延情報は未実装 + if (isLandscape) return; + const payload = { + data: { + trainNum, + limited, + }, + navigate, + originalStationList, + openStationACFromEachTrainInfo, + }; + SheetManager.show("EachTrainInfo", { + payload, + }); + return; + } + case "currentLines": { + const lineInfo = dataSet.currentLines.split("\n")[0]; + const lineID = stationNamePair[lineInfo]; + + setSelectedLine(lineID); + return; + } + default: { + return; + } + } + }; + + const onLoadEnd = () => { + if (once) return () => {}; + if (!stationData) return () => {}; + if (favoriteStation.length > 0) { + const getStationLine = (now) => { + const returnData = Object.keys(stationData).filter((d) => { + const cache = stationData[d].findIndex( + (data) => data.Station_JP == now.Station_JP + ); + return cache != -1; + }); + return returnData[0]; + }; + const lineName = getStationLine(favoriteStation[0][0]); + webview.current?.injectJavaScript( + `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')` + ); + once = true; + } + }; + + return ( + + ); +};