harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

回転判定の移動、コードの部分共通化

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-03-09 11:02:52 +00:00
parent d4c9bdae75
commit e1e35168d6
8 changed files with 139 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
App.js
View File

@ -18,6 +18,7 @@ import { SheetProvider } from "react-native-actions-sheet";
import "./components/ActionSheetComponents/sheets.js";
import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
import { SafeAreaProvider } from "react-native-safe-area-context";
import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js";
LogBox.ignoreLogs([
"ViewPropTypes will be removed",
"ColorPropType will be removed",
@ -32,25 +33,27 @@ if (Platform.OS === "android") {
export default function App() {
useEffect(() => UpdateAsync(), []);
return (
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<FavoriteStationProvider>
<TrainDelayDataProvider>
<CurrentTrainProvider>
<AreaInfoProvider>
<AllTrainDiagramProvider>
<BusAndTrainDataProvider>
<SheetProvider>
<AppContainer />
</SheetProvider>
</BusAndTrainDataProvider>
</AllTrainDiagramProvider>
</AreaInfoProvider>
</CurrentTrainProvider>
</TrainDelayDataProvider>
</FavoriteStationProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
<DeviceOrientationChangeProvider>
<SafeAreaProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<FavoriteStationProvider>
<TrainDelayDataProvider>
<CurrentTrainProvider>
<AreaInfoProvider>
<AllTrainDiagramProvider>
<BusAndTrainDataProvider>
<SheetProvider>
<AppContainer />
</SheetProvider>
</BusAndTrainDataProvider>
</AllTrainDiagramProvider>
</AreaInfoProvider>
</CurrentTrainProvider>
</TrainDelayDataProvider>
</FavoriteStationProvider>
</GestureHandlerRootView>
</SafeAreaProvider>
</DeviceOrientationChangeProvider>
);
}
export function AppContainer() {

87
Apps.js
View File

@ -10,6 +10,7 @@ import {
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";
@ -18,6 +19,7 @@ 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";
import TrainMenu from "./components/trainMenu";
import { EachTrainInfoCore } from "./components/ActionSheetComponents/EachTrainInfoCore";
@ -31,16 +33,8 @@ export default function Apps({ navigation, webview, stationData }) {
const { navigate } = navigation;
var urlcache = "";
const { favoriteStation } = useFavoriteStation();
const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
const handleLayout = () => {};
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [height, width]);
//画面表示関連
const [iconSetting, setIconSetting] = useState(undefined);
@ -70,6 +64,10 @@ export default function Apps({ navigation, webview, stationData }) {
stationMenu,
trainMenu
);
const ASCore = ({ k, s, d }) =>
AS.getItem(k)
.then((d) => (d ? s(d) : AS.setItem(k, d).then(Updates.reloadAsync)))
.catch(() => AS.setItem(k, d).then(Updates.reloadAsync));
useEffect(() => {
//ニュース表示
@ -82,67 +80,26 @@ export default function Apps({ navigation, webview, stationData }) {
useEffect(() => {
//列車アイコンスイッチ
AS.getItem("iconSwitch")
.then((d) => {
if (d) {
setIconSetting(d);
} else {
AS.setItem("iconSwitch", "true").then(Updates.reloadAsync);
}
})
.catch(() => AS.setItem("iconSwitch", "true").then(Updates.reloadAsync));
}, []);
useEffect(() => {
ASCore({ k: "iconSwitch", s: setIconSetting, d: "true" });
//地図スイッチ
AS.getItem("mapSwitch")
.then((d) => {
if (d) {
setMapSwitch(d);
} else {
AS.setItem("mapSwitch", "false").then(Updates.reloadAsync);
}
})
.catch(() => AS.setItem("mapSwitch", "false").then(Updates.reloadAsync));
}, []);
useEffect(() => {
ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
//駅メニュースイッチ
AS.getItem("stationSwitch")
.then((d) => {
if (d) {
setStationMenu(d);
} else {
AS.setItem("stationSwitch", "true").then(Updates.reloadAsync);
}
})
.catch(() =>
AS.setItem("stationSwitch", "true").then(Updates.reloadAsync)
);
}, []);
useEffect(() => {
ASCore({ k: "stationSwitch", s: setStationMenu, d: "true" });
//列車メニュースイッチ
AS.getItem("trainSwitch")
.then((d) => {
if (d) {
setTrainMenu(d);
} else {
AS.setItem("trainSwitch", "true").then(Updates.reloadAsync);
}
})
.catch(() => AS.setItem("trainSwitch", "true").then(Updates.reloadAsync));
ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" });
}, []);
const onMessage = (event) => {
if (event.nativeEvent.data.includes("train.html")) {
navigate("trainbase", { info: event.nativeEvent.data, from: "Train" });
const { data } = event.nativeEvent;
if (data.includes("train.html")) {
navigate("trainbase", { info: data, from: "Train" });
return;
}
if (!originalStationList) {
alert("駅名標データを取得中...");
return;
}
const dataSet = JSON.parse(event.nativeEvent.data);
const dataSet = JSON.parse(data);
switch (dataSet.type) {
case "LoadError": {
setLoadError(true);
@ -151,12 +108,10 @@ export default function Apps({ navigation, webview, stationData }) {
case "PopUpMenu":
{
const selectedStationPDFAddress = dataSet.pdf;
const findStationEachLine = (selectLine) => {
let NearStation = selectLine.filter(
const findStationEachLine = (selectLine) =>
selectLine.filter(
(d) => d.StationTimeTable == selectedStationPDFAddress
);
return NearStation;
};
let returnDataBase = lineList
.map((d) => findStationEachLine(originalStationList[d]))
.filter((d) => d.length > 0)
@ -175,13 +130,9 @@ export default function Apps({ navigation, webview, stationData }) {
SheetManager.show("StationDetailView", {
payload,
}),
onExit: () => {
SheetManager.hide("StationDetailView");
},
onExit: () => SheetManager.hide("StationDetailView"),
};
SheetManager.show("StationDetailView", {
payload,
});
SheetManager.show("StationDetailView", { payload });
}
}
return;

24
components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
View File

@ -1,15 +1,7 @@
import React, { useEffect, useState } from "react";
import {
View,
Text,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import React from "react";
import { View, TouchableOpacity, useWindowDimensions } from "react-native";
import { StateBox } from "./StateBox";
import {
heightPercentageToDP,
widthPercentageToDP,
} from "react-native-responsive-screen";
import { useDeviceOrientationChange } from "../../../stateBox/useDeviceOrientationChange";
export const TrainDataView = ({
currentTrainData,
@ -18,16 +10,8 @@ export const TrainDataView = ({
openTrainInfo,
mode = 0,
}) => {
const [isLandscape, setIsLandscape] = useState(false);
const { width, height } = useWindowDimensions();
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
const { isLandscape } = useDeviceOrientationChange();
return (
<View

34
components/ActionSheetComponents/EachTrainInfoCore.js
View File

@ -1,34 +1,30 @@
import React, { useEffect, useState, useRef } from "react";
import React, { useEffect, useState } from "react";
import {
View,
LayoutAnimation,
Text,
TouchableOpacity,
Platform,
StyleSheet,
useWindowDimensions,
BackHandler,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import { SheetManager, useScrollHandlers } from "react-native-actions-sheet";
import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList";
import { heightPercentageToDP } from "react-native-responsive-screen";
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
import { getTrainType } from "../../lib/getTrainType";
import { customTrainDataDetector } from "../custom-train-data";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
import { LongHeader } from "./EachTrainInfo/LongHeader";
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
import { getStationData } from "../../lib/eachTrainInfoCoreLib/getStationData";
import { findReversalPoints } from "../../lib/eachTrainInfoCoreLib/findReversalPoints";
import { migrateTrainName } from "../../lib/eachTrainInfoCoreLib/migrateTrainName";
@ -62,6 +58,17 @@ export const EachTrainInfoCore = ({
);
}, [currentTrain, data.trainNum]);
useEffect(() => {
const backAction = () => {
SheetManager.hide("EachTrainInfo");
return true;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
backAction
);
return () => backHandler.remove();
}, []);
//bconst insets = useSafeAreaInsets();
const [headStation, setHeadStation] = useState();
@ -107,7 +114,7 @@ export const EachTrainInfoCore = ({
: [];
const { height, width } = useWindowDimensions();
const [isLandscape, setIsLandscape] = useState(false);
const { isLandscape } = useDeviceOrientationChange();
const [trueTrainID, setTrueTrainID] = useState();
useEffect(() => {
@ -167,15 +174,6 @@ export const EachTrainInfoCore = ({
}
}, [currentTrainData]);
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
const replaceSpecialTrainDetail = (trainNum) => {
let TD = trainList[trainNum];
if (!TD) return;

23
components/ActionSheetComponents/JRSTraInfo.js
View File

@ -1,4 +1,4 @@
import React, { useRef } from "react";
import React, { useEffect, useRef } from "react";
import {
View,
LayoutAnimation,
@ -7,9 +7,13 @@ import {
Text,
TouchableOpacity,
Platform,
BackHandler,
} from "react-native";
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
import ActionSheet, { useScrollHandlers } from "react-native-actions-sheet";
import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import LottieView from "lottie-react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import ViewShot from "react-native-view-shot";
@ -50,6 +54,7 @@ export const JRSTraInfo = () => {
}
useBottomSafeAreaPadding={Platform.OS == "android"}
>
<Handler />
<View
style={{
backgroundColor: "#0099CC",
@ -206,3 +211,17 @@ export const JRSTraInfo = () => {
</ActionSheet>
);
};
const Handler = () => {
useEffect(() => {
const backAction = () => {
SheetManager.hide("JRSTraInfo");
return true;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
backAction
);
return () => backHandler.remove();
}, []);
return <></>;
};

27
components/ActionSheetComponents/StationDeteilView.js
View File

@ -1,9 +1,16 @@
import React, { useState, useEffect } from "react";
import { View, Linking, Text, TouchableOpacity, Platform } from "react-native";
import {
View,
Linking,
Text,
TouchableOpacity,
BackHandler,
Platform,
} from "react-native";
import AutoHeightImage from "react-native-auto-height-image";
import { FontAwesome, Foundation, Ionicons } from "@expo/vector-icons";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import ActionSheet from "react-native-actions-sheet";
import ActionSheet, { SheetManager } from "react-native-actions-sheet";
import Sign from "../../components/駅名表/Sign";
import { TicketBox } from "../atom/TicketBox";
@ -25,6 +32,7 @@ export const StationDeteilView = (props) => {
} = props.payload;
const { busAndTrainData } = useBusAndTrainData();
const [trainBus, setTrainBus] = useState();
useEffect(() => {
if (!currentStation) return () => {};
const data = busAndTrainData.filter((d) => {
@ -60,6 +68,7 @@ export const StationDeteilView = (props) => {
}
useBottomSafeAreaPadding={Platform.OS == "android"}
>
<Handler />
<View
key={currentStation}
style={{
@ -417,6 +426,20 @@ const 駅構内図 = (props) => {
);
};
const Handler = () => {
useEffect(() => {
const backAction = () => {
SheetManager.hide("StationDetailView");
return true;
};
const backHandler = BackHandler.addEventListener(
"hardwareBackPress",
backAction
);
return () => backHandler.remove();
}, []);
return <></>;
};
const styleSheet = {
外枠: {
width: wp("80%"),

7
components/AndroidWidget/TraInfoEXWidget.jsx
View File

@ -65,13 +65,14 @@ export function TraInfoEXWidget({ time, delayString }) {
flexDirection: "row",
width: "match_parent",
backgroundColor: "#ffffff",
flex: 1,
}}
clickAction="WIDGET_CLICK"
key={data[1]}
>
<FlexText flex={15} text={data[0].replace("\n", "")} />
<FlexText flex={5} text={data[1]} />
<FlexText flex={6} text={data[3]} />
<FlexText flex={3} text={data[0].replace("\n", "")} />
<FlexText flex={1} text={data[1]} />
<FlexText flex={1} text={data[3]} />
</FlexWidget>
);
})

28
stateBox/useDeviceOrientationChange.js Normal file
View File

@ -0,0 +1,28 @@
import React, { createContext, useContext, useState, useEffect } from "react";
import { useWindowDimensions } from "react-native";
const initialState = { isLandscape: false, setIsLandscape: () => {} };
const DeviceOrientationChange = createContext(initialState);
export const useDeviceOrientationChange = () => {
return useContext(DeviceOrientationChange);
};
export const DeviceOrientationChangeProvider = ({ children }) => {
const [isLandscape, setIsLandscape] = useState(false);
const { height, width } = useWindowDimensions();
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [height, width]);
return (
<DeviceOrientationChange.Provider value={{ isLandscape, setIsLandscape }}>
{children}
</DeviceOrientationChange.Provider>
);
};