DynamicHeaderを分割
This commit is contained in:
harukin-OneMix4
parent
cb2562fe9c
commit
84c050e928
@ -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) => {
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<View style={{ maxHeight: heightPercentageToDP("70%") }}>
|
||||
{from == "AllTrainDiagramView" || (
|
||||
<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" ? (
|
||||
<></>
|
||||
) : (
|
||||
<ScrollView
|
||||
//onTouchStart={() => setActionSheetHorizonalScroll(true)}
|
||||
//onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
|
||||
//onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
flex: 1,
|
||||
//width: widthPercentageToDP("200%"),
|
||||
// minHeight: 200,
|
||||
//height: heightPercentageToDP("20%"),
|
||||
}}
|
||||
horizontal
|
||||
pagingEnabled
|
||||
>
|
||||
<TrainDataView
|
||||
mode={2}
|
||||
currentTrainData={currentTrainData}
|
||||
currentPosition={currentPosition}
|
||||
nearTrainIDList={nearTrainIDList}
|
||||
openTrainInfo={openTrainInfo}
|
||||
/>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
longHeader={
|
||||
from == "AllTrainDiagramView" ? (
|
||||
<></>
|
||||
) : (
|
||||
<ScrollView
|
||||
//onTouchStart={() => setActionSheetHorizonalScroll(true)}
|
||||
//onScrollEndDrag={() => setActionSheetHorizonalScroll(false)}
|
||||
//onScrollBeginDrag={() => console.log("onScrollBeginDrag")}
|
||||
style={{
|
||||
flexDirection: "row",
|
||||
//width: widthPercentageToDP("200%"),
|
||||
// minHeight: 200,
|
||||
//height: heightPercentageToDP("20%"),
|
||||
}}
|
||||
horizontal
|
||||
pagingEnabled
|
||||
>
|
||||
<TrainDataView
|
||||
currentTrainData={currentTrainData}
|
||||
currentPosition={currentPosition}
|
||||
nearTrainIDList={nearTrainIDList}
|
||||
openTrainInfo={openTrainInfo}
|
||||
/>
|
||||
</ScrollView>
|
||||
)
|
||||
}
|
||||
header={
|
||||
<DynamicHeader
|
||||
animHeaderValue={scrollOffsetY}
|
||||
currentTrainData={currentTrainData}
|
||||
@ -459,153 +519,15 @@ export const EachTrainInfo = (props) => {
|
||||
nearTrainIDList={nearTrainIDList}
|
||||
openTrainInfo={openTrainInfo}
|
||||
/>
|
||||
)}
|
||||
<ScrollView
|
||||
{...scrollHandlers}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
stickyHeaderIndices={[1]}
|
||||
scrollEventThrottle={16}
|
||||
onScroll={Animated.event(
|
||||
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
|
||||
{ useNativeDriver: false }
|
||||
)}
|
||||
>
|
||||
}
|
||||
topStickyContent={
|
||||
<View
|
||||
style={{
|
||||
height: from == "AllTrainDiagramView" ? 0 : 120,
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
/>
|
||||
<View
|
||||
style={{
|
||||
height: from == "AllTrainDiagramView" ? "auto" : 120,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
index={1}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View
|
||||
style={{
|
||||
alignItems: "center",
|
||||
backgroundColor: "white",
|
||||
flexDirection: "row",
|
||||
}}
|
||||
index={0}
|
||||
>
|
||||
<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" }}>
|
||||
{!isNaN(currentTrainData?.delay) &&
|
||||
currentTrainData?.delay != 0 && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 15,
|
||||
color: "black",
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
textAlign: "right",
|
||||
textDecorationLine: "line-through",
|
||||
}}
|
||||
>
|
||||
(定刻)
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: isNaN(currentTrainData?.delay)
|
||||
? "black"
|
||||
: currentTrainData?.delay == 0
|
||||
? "black"
|
||||
: "red",
|
||||
width: 60,
|
||||
}}
|
||||
>
|
||||
見込
|
||||
</Text>
|
||||
<Text style={{ fontSize: 20, width: 50 }}></Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{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,
|
||||
@ -615,13 +537,140 @@ export const EachTrainInfo = (props) => {
|
||||
flex: 1,
|
||||
}}
|
||||
>
|
||||
<Text style={{ fontSize: 20 }}> </Text>
|
||||
<Text style={{ fontSize: 20 }}>停車駅</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
{!isNaN(currentTrainData?.delay) &&
|
||||
currentTrainData?.delay != 0 && (
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 15,
|
||||
color: "black",
|
||||
position: "absolute",
|
||||
right: 110,
|
||||
textAlign: "right",
|
||||
textDecorationLine: "line-through",
|
||||
}}
|
||||
>
|
||||
(定刻)
|
||||
</Text>
|
||||
)}
|
||||
<Text
|
||||
style={{
|
||||
fontSize: 20,
|
||||
color: isNaN(currentTrainData?.delay)
|
||||
? "black"
|
||||
: currentTrainData?.delay == 0
|
||||
? "black"
|
||||
: "red",
|
||||
width: 60,
|
||||
}}
|
||||
>
|
||||
見込
|
||||
</Text>
|
||||
<Text style={{ fontSize: 20, width: 50 }}></Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</ScrollView>
|
||||
</View>
|
||||
}
|
||||
>
|
||||
{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>
|
||||
);
|
||||
};
|
||||
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",
|
||||
},
|
||||
});
|
||||
|
||||
105
components/DynamicHeaderScrollView.js
Normal file
105
components/DynamicHeaderScrollView.js
Normal file
@ -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 (
|
||||
<View {...containerProps}>
|
||||
<View style={{ position: "relative" }}>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.header,
|
||||
{
|
||||
height: Max_Header_Height,
|
||||
backgroundColor: "#0099CC",
|
||||
opacity: animatedHeaderVisible,
|
||||
|
||||
top: 0,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{longHeader}
|
||||
</Animated.View>
|
||||
<Animated.View
|
||||
style={[
|
||||
styles.header,
|
||||
{
|
||||
height: animatedHeaderHeight2,
|
||||
backgroundColor: "#0099CC",
|
||||
margin: 0,
|
||||
top: 0,
|
||||
opacity: animatedHeaderVisible2,
|
||||
},
|
||||
]}
|
||||
>
|
||||
{shortHeader}
|
||||
</Animated.View>
|
||||
</View>
|
||||
<ScrollView
|
||||
{...scrollViewProps}
|
||||
style={{
|
||||
backgroundColor: "white",
|
||||
}}
|
||||
stickyHeaderIndices={[1]}
|
||||
scrollEventThrottle={16}
|
||||
onScroll={Animated.event(
|
||||
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
|
||||
{ useNativeDriver: false }
|
||||
)}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
height: Scroll_Distance,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
/>
|
||||
{topStickyContent && (
|
||||
<View
|
||||
style={{
|
||||
paddingTop: Min_Header_Height,
|
||||
flexDirection: "column",
|
||||
}}
|
||||
index={1}
|
||||
>
|
||||
{topStickyContent}
|
||||
</View>
|
||||
)}
|
||||
{children}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue
Block a user