とりあえずこれでビルド
This commit is contained in:
harukin-OneMix4
parent
93529f4f7d
commit
72412e87e8
3
Apps.js
3
Apps.js
@ -32,9 +32,6 @@ export default function Apps({ navigation, webview, stationData }) {
|
||||
const [isLandscape, setIsLandscape] = useState(false); //画面が横向きかどうか
|
||||
const handleLayout = () => {};
|
||||
useEffect(() => {
|
||||
console.log("レイアウト変更");
|
||||
console.log(height, width);
|
||||
console.log(height / width);
|
||||
if (height / width > 1.5) {
|
||||
setIsLandscape(false);
|
||||
}
|
||||
|
||||
@ -6,9 +6,13 @@ import {
|
||||
TouchableOpacity,
|
||||
Platform,
|
||||
StyleSheet,
|
||||
useWindowDimensions,
|
||||
} from "react-native";
|
||||
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 trainList from "../../assets/originData/trainList";
|
||||
import { lineList } from "../../lib/getStationList";
|
||||
@ -24,6 +28,7 @@ import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
||||
import { LongHeader } from "./EachTrainInfo/LongHeader";
|
||||
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
|
||||
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
|
||||
import { LandscapeTrainInfo } from "./EachTrainInfo/LandscapeTrainInfo";
|
||||
|
||||
export const EachTrainInfo = (props) => {
|
||||
if (!props.payload) return <></>;
|
||||
@ -47,6 +52,16 @@ export const EachTrainInfo = (props) => {
|
||||
const [isConcatNear, setIsConcatNear] = useState(false);
|
||||
const [tailStation, setTailStation] = 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);
|
||||
|
||||
//裏列車探索
|
||||
@ -376,6 +391,7 @@ export const EachTrainInfo = (props) => {
|
||||
.replace("ライナーライナー", "ライナー");
|
||||
};
|
||||
const actionSheetRef = useRef(null);
|
||||
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
|
||||
return (
|
||||
<ActionSheet
|
||||
gestureEnabled={true}
|
||||
@ -384,6 +400,7 @@ export const EachTrainInfo = (props) => {
|
||||
ref={actionSheetRef}
|
||||
drawUnderStatusBar={false}
|
||||
isModal={Platform.OS == "ios"}
|
||||
|
||||
//useBottomSafeAreaPadding={Platform.OS == "android"}
|
||||
>
|
||||
<View
|
||||
@ -445,60 +462,46 @@ export const EachTrainInfo = (props) => {
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<DynamicHeaderScrollView
|
||||
styles={styles}
|
||||
containerProps={{ style: { maxHeight: heightPercentageToDP("70%") } }}
|
||||
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
|
||||
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
|
||||
shortHeader={
|
||||
from == "AllTrainDiagramView" ? (
|
||||
<></>
|
||||
) : (
|
||||
<ShortHeader
|
||||
currentTrainData={currentTrainData}
|
||||
currentPosition={currentPosition}
|
||||
nearTrainIDList={nearTrainIDList}
|
||||
openTrainInfo={openTrainInfo}
|
||||
/>
|
||||
)
|
||||
}
|
||||
longHeader={
|
||||
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" }}
|
||||
{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>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{/* <LottieView
|
||||
<Text
|
||||
style={{ fontSize: 18, fontWeight: "bold", color: "black" }}
|
||||
>
|
||||
「本当の始発駅」を表示
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
{/* <LottieView
|
||||
autoPlay
|
||||
loop
|
||||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||||
@ -506,56 +509,175 @@ export const EachTrainInfo = (props) => {
|
||||
/>
|
||||
<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" }}
|
||||
{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>
|
||||
</TouchableOpacity>
|
||||
)}
|
||||
<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 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>
|
||||
</View>
|
||||
</DynamicHeaderScrollView>
|
||||
</LandscapeTrainInfo>
|
||||
) : (
|
||||
<DynamicHeaderScrollView
|
||||
styles={styles}
|
||||
containerProps={{
|
||||
style: { maxHeight: heightPercentageToDP("70%") },
|
||||
}}
|
||||
Max_Header_Height={from == "AllTrainDiagramView" ? 0 : 200}
|
||||
Min_Header_Height={from == "AllTrainDiagramView" ? 0 : 80}
|
||||
shortHeader={
|
||||
from == "AllTrainDiagramView" ? (
|
||||
<></>
|
||||
) : (
|
||||
<ShortHeader
|
||||
currentTrainData={currentTrainData}
|
||||
currentPosition={currentPosition}
|
||||
nearTrainIDList={nearTrainIDList}
|
||||
openTrainInfo={openTrainInfo}
|
||||
/>
|
||||
)
|
||||
}
|
||||
longHeader={
|
||||
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>
|
||||
</DynamicHeaderScrollView>
|
||||
)}
|
||||
</View>
|
||||
</ActionSheet>
|
||||
);
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
@ -1,4 +1,4 @@
|
||||
import React from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
View,
|
||||
Text,
|
||||
@ -18,14 +18,24 @@ 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]);
|
||||
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
//minHeight: 200,
|
||||
//height: heightPercentageToDP("20%"),
|
||||
width: width,
|
||||
width: isLandscape ? width / 2 : width,
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user