DynamicHeaderを分割
This commit is contained in:
harukin-OneMix4
parent
cb2562fe9c
commit
84c050e928
@ -7,6 +7,7 @@ import {
|
|||||||
TouchableOpacity,
|
TouchableOpacity,
|
||||||
Platform,
|
Platform,
|
||||||
Animated,
|
Animated,
|
||||||
|
StyleSheet,
|
||||||
} from "react-native";
|
} from "react-native";
|
||||||
import { Ionicons } from "@expo/vector-icons";
|
import { Ionicons } from "@expo/vector-icons";
|
||||||
import ActionSheet, {
|
import ActionSheet, {
|
||||||
@ -26,6 +27,7 @@ import { EachStopList } from "./EachTrainInfo/EachStopList";
|
|||||||
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
|
import { DataFromButton } from "./EachTrainInfo/DataFromButton";
|
||||||
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
|
import { TrainDataView } from "./EachTrainInfo/TrainDataView";
|
||||||
import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
|
import { DynamicHeader } from "./EachTrainInfo/DynamicHeader";
|
||||||
|
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
||||||
|
|
||||||
export const EachTrainInfo = (props) => {
|
export const EachTrainInfo = (props) => {
|
||||||
if (!props.payload) return <></>;
|
if (!props.payload) return <></>;
|
||||||
@ -450,8 +452,66 @@ export const EachTrainInfo = (props) => {
|
|||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
<View style={{ maxHeight: heightPercentageToDP("70%") }}>
|
<DynamicHeaderScrollView
|
||||||
{from == "AllTrainDiagramView" || (
|
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
|
<DynamicHeader
|
||||||
animHeaderValue={scrollOffsetY}
|
animHeaderValue={scrollOffsetY}
|
||||||
currentTrainData={currentTrainData}
|
currentTrainData={currentTrainData}
|
||||||
@ -459,153 +519,15 @@ export const EachTrainInfo = (props) => {
|
|||||||
nearTrainIDList={nearTrainIDList}
|
nearTrainIDList={nearTrainIDList}
|
||||||
openTrainInfo={openTrainInfo}
|
openTrainInfo={openTrainInfo}
|
||||||
/>
|
/>
|
||||||
)}
|
}
|
||||||
<ScrollView
|
topStickyContent={
|
||||||
{...scrollHandlers}
|
|
||||||
style={{
|
|
||||||
backgroundColor: "white",
|
|
||||||
}}
|
|
||||||
stickyHeaderIndices={[1]}
|
|
||||||
scrollEventThrottle={16}
|
|
||||||
onScroll={Animated.event(
|
|
||||||
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
|
|
||||||
{ useNativeDriver: false }
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
height: from == "AllTrainDiagramView" ? 0 : 120,
|
alignItems: "center",
|
||||||
flexDirection: "column",
|
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
|
<View
|
||||||
style={{
|
style={{
|
||||||
padding: 8,
|
padding: 8,
|
||||||
@ -615,13 +537,140 @@ export const EachTrainInfo = (props) => {
|
|||||||
flex: 1,
|
flex: 1,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Text style={{ fontSize: 20 }}> </Text>
|
<Text style={{ fontSize: 20 }}>停車駅</Text>
|
||||||
<View style={{ flex: 1 }} />
|
<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>
|
</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>
|
</View>
|
||||||
</ActionSheet>
|
</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