diff --git a/components/ActionSheetComponents/EachTrainInfo.js b/components/ActionSheetComponents/EachTrainInfo.js
index 0151b6f..8adaca1 100644
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@@ -7,6 +7,7 @@ import {
TouchableOpacity,
Platform,
Animated,
+ StyleSheet,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import ActionSheet, {
@@ -26,6 +27,7 @@ import { EachStopList } from "./EachTrainInfo/EachStopList";
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
+import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
export const EachTrainInfo = (props) => {
if (!props.payload) return <>;
@@ -450,8 +452,66 @@ export const EachTrainInfo = (props) => {
/>
)}
-
- {from == "AllTrainDiagramView" || (
+
+ ) : (
+ setActionSheetHorizonalScroll(true)}
+ //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+ //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+ style={{
+ flexDirection: "row",
+ flex: 1,
+ //width: widthPercentageToDP("200%"),
+ // minHeight: 200,
+ //height: heightPercentageToDP("20%"),
+ }}
+ horizontal
+ pagingEnabled
+ >
+
+
+ )
+ }
+ longHeader={
+ from == "AllTrainDiagramView" ? (
+ <>
+ ) : (
+ setActionSheetHorizonalScroll(true)}
+ //onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
+ //onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
+ style={{
+ flexDirection: "row",
+ //width: widthPercentageToDP("200%"),
+ // minHeight: 200,
+ //height: heightPercentageToDP("20%"),
+ }}
+ horizontal
+ pagingEnabled
+ >
+
+
+ )
+ }
+ header={
{
nearTrainIDList={nearTrainIDList}
openTrainInfo={openTrainInfo}
/>
- )}
-
+ }
+ topStickyContent={
-
-
-
-
- 停車駅
-
-
- {!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",
- }}
- >
-
- 「本当の始発駅」を表示
-
-
- )}
- {/*
- ほげほげふがふが */}
-
- {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",
- }}
- >
-
- 「本当の終着駅」を表示
-
-
- )}
-
-
{
flex: 1,
}}
>
-
+ 停車駅
+
+ {!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",
+ }}
+ >
+
+ 「本当の始発駅」を表示
+
+
+ )}
+ {/*
+ ほげほげふがふが */}
+
+ {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",
+ }}
+ >
+
+ 「本当の終着駅」を表示
+
+
+ )}
+
+
+
+
+
+
+
+
);
};
+const styles = StyleSheet.create({
+ header: {
+ justifyContent: "center",
+ alignItems: "center",
+ left: 0,
+ right: 0,
+ //paddingTop: 10,
+ position: "absolute",
+ zIndex: 1,
+ backgroundColor: "f0f0f0",
+ },
+ headerText: {
+ color: "#fff",
+ fontSize: 25,
+ fontWeight: "bold",
+ textAlign: "center",
+ },
+});
diff --git a/components/DynamicHeaderScrollView.js b/components/DynamicHeaderScrollView.js
new file mode 100644
index 0000000..e804856
--- /dev/null
+++ b/components/DynamicHeaderScrollView.js
@@ -0,0 +1,105 @@
+import { ScrollView, View, Animated } from "react-native";
+import React, { useRef } from "react";
+
+export const DynamicHeaderScrollView = (props) => {
+ const {
+ Max_Header_Height = 200,
+ Min_Header_Height = 80,
+ children,
+ scrollViewProps = {},
+ containerProps = {},
+ shortHeader = <>,
+ longHeader = <>,
+ topStickyContent,
+ styles,
+ } = props;
+ const scrollOffsetY = useRef(new Animated.Value(0)).current;
+
+ const Scroll_Distance = Max_Header_Height - Min_Header_Height;
+
+ const animatedHeaderHeight = scrollOffsetY.interpolate({
+ inputRange: [Min_Header_Height, Scroll_Distance],
+ outputRange: [Max_Header_Height, 0],
+ extrapolate: "clamp",
+ });
+ const animatedHeaderHeight2 = scrollOffsetY.interpolate({
+ inputRange: [0, Scroll_Distance],
+ outputRange: [Max_Header_Height, Min_Header_Height],
+ extrapolate: "clamp",
+ });
+ const animatedHeaderVisible = scrollOffsetY.interpolate({
+ inputRange: [Min_Header_Height, Scroll_Distance],
+ outputRange: [1, 0],
+ extrapolate: "clamp",
+ });
+ const animatedHeaderVisible2 = scrollOffsetY.interpolate({
+ inputRange: [Min_Header_Height, Scroll_Distance],
+ outputRange: [0, 1],
+ extrapolate: "clamp",
+ });
+ return (
+
+
+
+ {longHeader}
+
+
+ {shortHeader}
+
+
+
+
+ {topStickyContent && (
+
+ {topStickyContent}
+
+ )}
+ {children}
+
+
+ );
+};