webviewの分離化
This commit is contained in:
harukin-expo-dev-env
parent
eb9d42abbc
commit
a418375391
@ -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} */}
|
||||
<WebView
|
||||
useWebKit
|
||||
ref={webview}
|
||||
source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
|
||||
originWhitelist={[
|
||||
"https://train.jr-shikoku.co.jp",
|
||||
"https://train.jr-shikoku.co.jp/sp.html",
|
||||
]}
|
||||
mixedContentMode={"compatibility"}
|
||||
javaScriptEnabled
|
||||
allowsBackForwardNavigationGestures
|
||||
setSupportMultipleWindows
|
||||
onNavigationStateChange={onNavigationStateChange}
|
||||
onMessage={onMessage}
|
||||
injectedJavaScript={injectJavascript}
|
||||
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;
|
||||
}
|
||||
}}
|
||||
<AppsWebView
|
||||
originalStationList={originalStationList}
|
||||
loadErrorStatus={{ LoadError, setLoadError }}
|
||||
trainInfoStatus={{ trainInfo, setTrainInfo }}
|
||||
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
|
||||
injectJavascript={injectJavascript}
|
||||
/>
|
||||
{isLandscape && trainInfo.trainNum && (
|
||||
<View
|
||||
|
||||
178
components/Apps/WebView.jsx
Normal file
178
components/Apps/WebView.jsx
Normal file
@ -0,0 +1,178 @@
|
||||
import React from "react";
|
||||
import { Platform, LayoutAnimation } from "react-native";
|
||||
import { WebView } from "react-native-webview";
|
||||
|
||||
import { lineList } from "../../lib/getStationList";
|
||||
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";
|
||||
|
||||
import { useNavigation } from "@react-navigation/native";
|
||||
import { useTrainMenu } from "../../stateBox/useTrainMenu";
|
||||
import { stationNamePair } from "../../lib/getStationList2";
|
||||
export const AppsWebView = ({
|
||||
originalStationList,
|
||||
loadErrorStatus,
|
||||
trainInfoStatus,
|
||||
openStationACFromEachTrainInfo,
|
||||
injectJavascript,
|
||||
}) => {
|
||||
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 (
|
||||
<WebView
|
||||
useWebKit
|
||||
ref={webview}
|
||||
source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
|
||||
originWhitelist={[
|
||||
"https://train.jr-shikoku.co.jp",
|
||||
"https://train.jr-shikoku.co.jp/sp.html",
|
||||
]}
|
||||
mixedContentMode={"compatibility"}
|
||||
javaScriptEnabled
|
||||
allowsBackForwardNavigationGestures
|
||||
setSupportMultipleWindows
|
||||
onNavigationStateChange={onNavigationStateChange}
|
||||
onMessage={onMessage}
|
||||
injectedJavaScript={injectJavascript}
|
||||
onLoadEnd={onLoadEnd}
|
||||
/>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user