From 84c050e928b4f738cb048a20a555ebb524b59c2c Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Sun, 11 Feb 2024 20:22:32 +0900 Subject: [PATCH] =?UTF-8?q?DynamicHeader=E3=82=92=E5=88=86=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ActionSheetComponents/EachTrainInfo.js | 345 ++++++++++-------- components/DynamicHeaderScrollView.js | 105 ++++++ 2 files changed, 302 insertions(+), 148 deletions(-) create mode 100644 components/DynamicHeaderScrollView.js 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} + + + ); +};