Merge commit '72412e87e887a1cbcf3987927c16fc9cb9e36949' into develop

This commit is contained in:
harukin-OneMix4 2024-02-12 00:55:15 +09:00
commit 8257440138
6 changed files with 392 additions and 167 deletions

39
Apps.js
View File

@ -1,8 +1,15 @@
import React, { useEffect, useRef, useState } from "react"; import React, { useEffect, useState } from "react";
import { View, Platform, Text, TouchableOpacity } from "react-native"; import {
View,
Platform,
Text,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import { WebView } from "react-native-webview"; import { WebView } from "react-native-webview";
import Constants from "expo-constants"; import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import { AS } from "./storageControl"; import { AS } from "./storageControl";
import { news } from "./config/newsUpdate"; import { news } from "./config/newsUpdate";
import { getStationList, lineList } from "./lib/getStationList"; import { getStationList, lineList } from "./lib/getStationList";
@ -11,15 +18,27 @@ import { checkDuplicateTrainData } from "./lib/checkDuplicateTrainData";
import { useFavoriteStation } from "./stateBox/useFavoriteStation"; import { useFavoriteStation } from "./stateBox/useFavoriteStation";
import { useCurrentTrain } from "./stateBox/useCurrentTrain"; import { useCurrentTrain } from "./stateBox/useCurrentTrain";
import { SheetManager } from "react-native-actions-sheet"; import { SheetManager } from "react-native-actions-sheet";
import TrainMenu from "./components/trainMenu";
/* /*
import StatusbarDetect from './StatusbarDetect'; import StatusbarDetect from './StatusbarDetect';
var Status = StatusbarDetect(); */ var Status = StatusbarDetect(); */
export default function Apps({ navigation, webview, stationData }) { export default function Apps({ navigation, webview, stationData }) {
const { currentTrain } = useCurrentTrain(); const { currentTrain } = useCurrentTrain();
const { height, width } = useWindowDimensions();
const { navigate } = navigation; const { navigate } = navigation;
var urlcache = ""; var urlcache = "";
const { favoriteStation } = useFavoriteStation(); const { favoriteStation } = useFavoriteStation();
const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
const handleLayout = () => {};
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [height, width]);
//画面表示関連 //画面表示関連
const [iconSetting, setIconSetting] = useState(undefined); const [iconSetting, setIconSetting] = useState(undefined);
@ -271,8 +290,22 @@ export default function Apps({ navigation, webview, stationData }) {
style={{ style={{
height: "100%", height: "100%",
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0, paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
flexDirection: isLandscape ? "row" : "column",
}} }}
onLayout={handleLayout}
> >
{isLandscape ? (
<TrainMenu
webview={webview}
stationData={stationData}
navigation={{ navigate: null }}
style={{
width: (width / 100) * 40,
height: "100%",
flexDirection: "column-reverse",
}}
/>
) : null}
{/* {Status} */} {/* {Status} */}
<WebView <WebView
useWebKit useWebKit
@ -310,11 +343,13 @@ export default function Apps({ navigation, webview, stationData }) {
} }
}} }}
/> />
{isLandscape || (
<MapsButton <MapsButton
onPress={() => navigate("trainMenu", { webview })} onPress={() => navigate("trainMenu", { webview })}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
mapSwitch={mapSwitch == "true" ? "flex" : "none"} mapSwitch={mapSwitch == "true" ? "flex" : "none"}
/> />
)}
<ReloadButton <ReloadButton
onPress={() => webview.current.reload()} onPress={() => webview.current.reload()}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0} top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}

View File

@ -8,7 +8,7 @@
"android" "android"
], ],
"version": "4.6", "version": "4.6",
"orientation": "portrait", "orientation": "default",
"icon": "./assets/icon.png", "icon": "./assets/icon.png",
"splash": { "splash": {
"image": "./assets/splash.png", "image": "./assets/splash.png",

View File

@ -6,9 +6,13 @@ import {
TouchableOpacity, TouchableOpacity,
Platform, Platform,
StyleSheet, StyleSheet,
useWindowDimensions,
} from "react-native"; } from "react-native";
import { Ionicons } from "@expo/vector-icons"; import { Ionicons } from "@expo/vector-icons";
import ActionSheet, { SheetManager } from "react-native-actions-sheet"; import ActionSheet, {
SheetManager,
useScrollHandlers,
} from "react-native-actions-sheet";
import { AS } from "../../storageControl"; import { AS } from "../../storageControl";
import trainList from "../../assets/originData/trainList"; import trainList from "../../assets/originData/trainList";
import { lineList } from "../../lib/getStationList"; import { lineList } from "../../lib/getStationList";
@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
import { LongHeader } from "./EachTrainInfo/LongHeader"; import { LongHeader } from "./EachTrainInfo/LongHeader";
import { ShortHeader } from "./EachTrainInfo/ShortHeader"; import { ShortHeader } from "./EachTrainInfo/ShortHeader";
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent"; import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
export const EachTrainInfo = (props) => { export const EachTrainInfo = (props) => {
if (!props.payload) return <></>; if (!props.payload) return <></>;
@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => {
const [isConcatNear, setIsConcatNear] = useState(false); const [isConcatNear, setIsConcatNear] = useState(false);
const [tailStation, setTailStation] = useState(); const [tailStation, setTailStation] = useState();
const [headStation, setHeadStation] = useState(); const [headStation, setHeadStation] = useState();
const { height, width } = useWindowDimensions();
const [isLandscape, setIsLandscape] = useState(false);
useEffect(() => {
if (height / width > 1.5) {
setIsLandscape(false);
}
if (height / width < 1.5) {
setIsLandscape(true);
}
}, [width, height]);
// const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false); // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
//裏列車探索 //裏列車探索
@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => {
.replace("ライナーライナー", "ライナー"); .replace("ライナーライナー", "ライナー");
}; };
const actionSheetRef = useRef(null); const actionSheetRef = useRef(null);
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
return ( return (
<ActionSheet <ActionSheet
gestureEnabled={true} gestureEnabled={true}
@ -384,6 +400,7 @@ export const EachTrainInfo = (props) => {
ref={actionSheetRef} ref={actionSheetRef}
drawUnderStatusBar={false} drawUnderStatusBar={false}
isModal={Platform.OS == "ios"} isModal={Platform.OS == "ios"}
//useBottomSafeAreaPadding={Platform.OS == "android"} //useBottomSafeAreaPadding={Platform.OS == "android"}
> >
<View <View
@ -445,9 +462,111 @@ export const EachTrainInfo = (props) => {
/> />
)} )}
</View> </View>
{isLandscape ? (
<LandscapeTrainInfo
scrollHandlers={scrollHandlers}
leftContent={
from == "AllTrainDiagramView" ? (
<></>
) : (
<LongHeader
currentTrainData={currentTrainData}
currentPosition={currentPosition}
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
)
}
topStickyContent={
<ScrollStickyContent currentTrainData={currentTrainData} />
}
>
{headStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(headStation)}
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>
)}
{/* <LottieView
autoPlay
loop
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
source={require("../../assets/51690-loading-diamonds.json")}
/>
<Text>ほげほげふがふが</Text> */}
{trainData.map((i, index) =>
i.split(",")[1] == "提" ? (
<DataFromButton i={i} />
) : (
<EachStopList
i={i}
index={index}
stationList={stationList}
points={points}
currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={
openStationACFromEachTrainInfo
}
/>
)
)}
{tailStation && !isConcatNear && (
<TouchableOpacity
onPress={() => openBackTrainInfo(tailStation)}
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>
)}
<View style={{ flexDirection: "row" }}>
<View
style={{
padding: 8,
flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}}
>
<Text style={{ fontSize: 20 }}> </Text>
<View style={{ flex: 1 }} />
</View>
</View>
</LandscapeTrainInfo>
) : (
<DynamicHeaderScrollView <DynamicHeaderScrollView
styles={styles} styles={styles}
containerProps={{ style: { maxHeight: heightPercentageToDP("70%") } }} containerProps={{
style: { maxHeight: heightPercentageToDP("70%") },
}}
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200} Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80} Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
shortHeader={ shortHeader={
@ -516,7 +635,9 @@ export const EachTrainInfo = (props) => {
stationList={stationList} stationList={stationList}
points={points} points={points}
currentTrainData={currentTrainData} currentTrainData={currentTrainData}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo} openStationACFromEachTrainInfo={
openStationACFromEachTrainInfo
}
/> />
) )
)} )}
@ -556,6 +677,7 @@ export const EachTrainInfo = (props) => {
</View> </View>
</View> </View>
</DynamicHeaderScrollView> </DynamicHeaderScrollView>
)}
</View> </View>
</ActionSheet> </ActionSheet>
); );

View File

@ -0,0 +1,47 @@
import React from "react";
import { View, Text, ScrollView, useWindowDimensions } from "react-native";
export const LandscapeTrainInfo = (props) => {
const { leftContent, topStickyContent, children, scrollHandlers } = props;
const { height, width } = useWindowDimensions();
return (
<View
style={{
flexDirection: "row",
backgroundColor: "blue",
width: width,
height: (height / 100) * 70,
marginBottom: 50,
}}
>
<View
style={{
flexDirection: "column",
height: (height / 100) * 70,
width: width / 2,
}}
>
<Text>{width / 2}</Text>
{leftContent}
</View>
<ScrollView
{...scrollHandlers}
style={{
width: width / 2,
height: "auto",
}}
stickyHeaderIndices={[1]}
scrollEventThrottle={16}
onScroll={(d) => {
console.log(d.nativeEvent.contentOffset.y);
}}
>
<View style={{ height: 0 }} />
<View style={{ flexDirection: "column" }} index={1}>
{topStickyContent}
</View>
{children}
</ScrollView>
</View>
);
};

View File

@ -1,5 +1,10 @@
import React from "react"; import React, { useEffect, useState } from "react";
import { View, Text, TouchableOpacity } from "react-native"; import {
View,
Text,
TouchableOpacity,
useWindowDimensions,
} from "react-native";
import { StateBox } from "./StateBox"; import { StateBox } from "./StateBox";
import { import {
heightPercentageToDP, heightPercentageToDP,
@ -13,13 +18,24 @@ export const TrainDataView = ({
openTrainInfo, openTrainInfo,
mode = 0, 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]);
return ( return (
<View <View
style={{ style={{
flexDirection: "row", flexDirection: "row",
//minHeight: 200, //minHeight: 200,
//height: heightPercentageToDP("20%"), //height: heightPercentageToDP("20%"),
width: widthPercentageToDP("100%"), width: isLandscape ? width / 2 : width,
flex: 1, flex: 1,
}} }}
> >

View File

@ -6,10 +6,11 @@ export default function TrainMenu({
navigation: { navigate }, navigation: { navigate },
webview, webview,
stationData, stationData,
style,
}) { }) {
const mapRef = useRef(); const mapRef = useRef();
return ( return (
<View style={{ height: "100%", backgroundColor: "#0099CC" }}> <View style={{ height: "100%", backgroundColor: "#0099CC", ...style }}>
<MapView <MapView
style={{ flex: 1, width: "100%", height: "100%" }} style={{ flex: 1, width: "100%", height: "100%" }}
showsUserLocation={true} showsUserLocation={true}
@ -46,13 +47,14 @@ export default function TrainMenu({
webview.current?.injectJavaScript( webview.current?.injectJavaScript(
`MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')` `MoveDisplayStation('${d}_${D.MyStation}_${D.Station_JP}')`
); );
navigate("Apps"); if (navigate) navigate("Apps");
}} }}
></Marker> ></Marker>
); );
}) })
)} )}
</MapView> </MapView>
{navigate && (
<View style={{ flexDirection: "row" }}> <View style={{ flexDirection: "row" }}>
<UsefulBox <UsefulBox
backgroundColor={"#F89038"} backgroundColor={"#F89038"}
@ -84,9 +86,11 @@ export default function TrainMenu({
) )
} }
> >
この機能のフィードバック フィードバック
</UsefulBox> </UsefulBox>
</View> </View>
)}
{navigate && (
<TouchableOpacity <TouchableOpacity
style={{ style={{
padding: 10, padding: 10,
@ -105,6 +109,7 @@ export default function TrainMenu({
</Text> </Text>
<View style={{ flex: 1 }} /> <View style={{ flex: 1 }} />
</TouchableOpacity> </TouchableOpacity>
)}
</View> </View>
); );
} }
@ -115,14 +120,14 @@ const UsefulBox = (props) => {
style={{ style={{
flex: flex, flex: flex,
backgroundColor: backgroundColor, backgroundColor: backgroundColor,
padding: 10, padding: 5,
alignItems: "center", alignItems: "center",
margin: 2, margin: 2,
}} }}
onPress={onPressButton} onPress={onPressButton}
> >
<MaterialCommunityIcons name={icon} color="white" size={50} /> <MaterialCommunityIcons name={icon} color="white" size={50} />
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}> <Text style={{ color: "white", fontWeight: "bold", fontSize: 16 }}>
{children} {children}
</Text> </Text>
</TouchableOpacity> </TouchableOpacity>