diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index 233478f..97b436b 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -6,6 +6,7 @@ import {
Text,
TouchableOpacity,
Platform,
+ Animated,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ActionSheet, {
@@ -24,6 +25,7 @@ import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
+import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
export const EachTrainInfo = (props) => {
if (!props.payload) return <>;
@@ -377,6 +379,8 @@ export const EachTrainInfo = (props) => {
};
const actionSheetRef = useRef(null);
const scrollHandlers = useScrollHandlers("scrollview-1", actionSheetRef);
+
+ const scrollOffsetY = useRef(new Animated.Value(0)).current;
return (
{
/>
)}
- {from == "AllTrainDiagramView" || (
- setActionSheetHorizonalScroll(true)}
- //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
- //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
- style={{
- flexDirection: "row",
- //width: widthPercentageToDP("200%"),
- minHeight: 200,
- height: heightPercentageToDP("20%"),
- }}
- horizontal
- pagingEnabled
- >
-
+ {from == "AllTrainDiagramView" || (
+
- {/*
-
-
- 行先
-
-
- 岡山
-
-
+ )}
-
-
- 車両案内
-
-
-
- 宇多津でうずしお号と連結
-
-
-
-
-
-
- 編成(使用車両：2700系)
-
-
-
- {"[<自][自>][アン自|指>][アン指|G>]"}
-
-
-
- */}
-
- )}
-
-
- 停車駅
-
-
- {!isNaN(currentTrainData?.delay) &&
- currentTrainData?.delay != 0 && (
-
- (定刻)
-
- )}
-
- 見込
-
-
+
+ 停車駅
+
+
+ {!isNaN(currentTrainData?.delay) &&
+ currentTrainData?.delay != 0 && (
+
+ (定刻)
+
+ )}
+
+ 見込
+
+
+
-
- {headStation && !isConcatNear && (
- openBackTrainInfo(headStation)}
- style={{
- padding: 10,
- flexDirection: "row",
- borderColor: "blue",
- borderWidth: 1,
- margin: 10,
- borderRadius: 5,
- alignItems: "center",
- }}
- >
- openBackTrainInfo(headStation)}
+ style={{
+ padding: 10,
+ flexDirection: "row",
+ borderColor: "blue",
+ borderWidth: 1,
+ margin: 10,
+ borderRadius: 5,
+ alignItems: "center",
+ }}
>
- 「本当の始発駅」を表示
-
-
- )}
- {/*
+ 「本当の始発駅」を表示
+
+
+ )}
+ {/* {
/>
ほげほげふがふが */}
- {trainData.map((i, index) =>
- i.split(",")[1] == "提" ? (
-
- ) : (
-
- )
- )}
- {tailStation && !isConcatNear && (
- openBackTrainInfo(tailStation)}
- style={{
- padding: 10,
- flexDirection: "row",
- borderColor: "blue",
- borderWidth: 1,
- margin: 10,
- borderRadius: 5,
- alignItems: "center",
- }}
- >
-
+ i.split(",")[1] == "提" ? (
+
+ ) : (
+
+ )
+ )}
+ {tailStation && !isConcatNear && (
+ openBackTrainInfo(tailStation)}
+ style={{
+ padding: 10,
+ flexDirection: "row",
+ borderColor: "blue",
+ borderWidth: 1,
+ margin: 10,
+ borderRadius: 5,
+ alignItems: "center",
+ }}
>
- 「本当の終着駅」を表示
-
-
- )}
+
+ 「本当の終着駅」を表示
+
+
+ )}
-
-
-
-
+
+
+
+
+
-
-
+
+
);
diff --git a/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
new file mode 100644
index 0000000..fc2170f
--- /dev/null
+++ b/components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
@@ -0,0 +1,274 @@
+import * as React from "react";
+import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
+import { TrainDataView } from "./TrainDataView";
+
+const Max_Header_Height = 200;
+const Min_Header_Height = 80;
+const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+export const DynamicHeader = ({
+ animHeaderValue,
+ currentTrainData,
+ currentPosition,
+ nearTrainIDList,
+ openTrainInfo,
+}) => {
+ const animatedHeaderHeight = animHeaderValue.interpolate({
+ inputRange: [0, Scroll_Distance],
+ outputRange: [Max_Header_Height, 0],
+ extrapolate: "clamp",
+ });
+ const animatedHeaderHeight2 = animHeaderValue.interpolate({
+ inputRange: [0, Scroll_Distance],
+ outputRange: [0, Min_Header_Height],
+ extrapolate: "clamp",
+ });
+ const animateHeaderBackgroundColor = animHeaderValue.interpolate({
+ inputRange: [0, Max_Header_Height - Min_Header_Height],
+ outputRange: ["blue", "red"],
+ extrapolate: "clamp",
+ });
+ return (
+ <>
+
+ setActionSheetHorizonalScroll(true)}
+ //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+ //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+ style={{
+ flexDirection: "row",
+ //width: widthPercentageToDP("200%"),
+ // minHeight: 200,
+ //height: heightPercentageToDP("20%"),
+ }}
+ horizontal
+ pagingEnabled
+ >
+
+ {/*
+
+
+ 行先
+
+
+ 岡山
+
+
+
+
+
+ 車両案内
+
+
+
+ 宇多津でうずしお号と連結
+
+
+
+
+
+
+ 編成(使用車両：2700系)
+
+
+
+ {"[<自][自>][アン自|指>][アン指|G>]"}
+
+
+
+ */}
+
+
+
+ setActionSheetHorizonalScroll(true)}
+ //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+ //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+ style={{
+ flexDirection: "row",
+ flex: 1,
+ //width: widthPercentageToDP("200%"),
+ // minHeight: 200,
+ //height: heightPercentageToDP("20%"),
+ }}
+ horizontal
+ pagingEnabled
+ >
+
+ {/*
+
+
+ 行先
+
+
+ 岡山
+
+
+
+
+
+ 車両案内
+
+
+
+ 宇多津でうずしお号と連結
+
+
+
+
+
+
+ 編成(使用車両：2700系)
+
+
+
+ {"[<自][自>][アン自|指>][アン指|G>]"}
+
+
+
+ */}
+
+
+
+ );
+};
+const styles = StyleSheet.create({
+ header: {
+ justifyContent: "center",
+ alignItems: "center",
+ left: 0,
+ right: 0,
+ //paddingTop: 10,
+ },
+ headerText: {
+ color: "#fff",
+ fontSize: 25,
+ fontWeight: "bold",
+ textAlign: "center",
+ },
+});
diff --git a/components/ActionSheetComponents/EachTrainInfo/StateBox.js b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
index 933b930..c26f41b 100644
--- a/components/ActionSheetComponents/EachTrainInfo/StateBox.js
+++ b/components/ActionSheetComponents/EachTrainInfo/StateBox.js
@@ -1,19 +1,29 @@
import React from "react";
import { View, Text } from "react-native";
-export const StateBox = ({ text, title, style }) => (
-
+export const StateBox = ({ text, title, style, mode }) => (
+
{title}
-
+
{text?.match("～") ? (
<>
- {text.split("～")[0]}
+
+ {text.split("～")[0]}
+
～
- {text.split("～")[1]}
+
+ {text.split("～")[1]}
+
) : (
- {text}
+ {text}
)}
@@ -25,6 +35,19 @@ const boxStyle = {
padding: 10,
margin: 10,
};
+const boxStyle2 = {
+ flex: 1,
+ backgroundColor: "white",
+ borderRadius: 10,
+ padding: 5,
+ margin: 5,
+};
+const boxTextStyle2 = {
+ fontSize: 18,
+ color: "#0099CC",
+ textAlign: "right",
+};
+
const boxTextStyle = {
fontSize: 25,
color: "#0099CC",
diff --git a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
index a98ca15..cf73398 100644
--- a/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
+++ b/components/ActionSheetComponents/EachTrainInfo/TrainDataView.js
@@ -11,17 +11,20 @@ export const TrainDataView = ({
currentPosition,
nearTrainIDList,
openTrainInfo,
+ mode = 0,
}) => {
return (
-
+
{nearTrainIDList.length == 0 ? (
-
+
) : (