harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

挙動修正

Browse Source
This commit is contained in:
harukin-OneMix4 2024-02-08 19:18:28 +09:00
parent 49e9ed14bc
commit cb2562fe9c
2 changed files with 84 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
components/ActionSheetComponents/EachTrainInfo.js
View File

@ -460,13 +460,12 @@ export const EachTrainInfo = (props) => {
openTrainInfo={openTrainInfo} openTrainInfo={openTrainInfo}
/> />
)} )}
<ScrollView <ScrollView
{...scrollHandlers} {...scrollHandlers}
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
}} }}
stickyHeaderIndices={[0]} stickyHeaderIndices={[1]}
scrollEventThrottle={16} scrollEventThrottle={16}
onScroll={Animated.event( onScroll={Animated.event(
[{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }], [{ nativeEvent: { contentOffset: { y: scrollOffsetY } } }],
@ -475,56 +474,72 @@ export const EachTrainInfo = (props) => {
> >
<View <View
style={{ style={{
alignItems: "center", height: from == "AllTrainDiagramView" ? 0 : 120,
backgroundColor: "white", flexDirection: "column",
flexDirection: "row",
}} }}
index={0} />
<View
style={{
height: from == "AllTrainDiagramView" ? "auto" : 120,
flexDirection: "column",
}}
index={1}
> >
<View style={{ flex: 1 }} />
<View <View
style={{ style={{
padding: 8, alignItems: "center",
backgroundColor: "white",
flexDirection: "row", flexDirection: "row",
borderBottomWidth: 1,
borderBottomColor: "#f0f0f0",
flex: 1,
}} }}
index={0}
> >
<Text style={{ fontSize: 20 }}>停車駅</Text> <View
<View style={{ flex: 1 }} /> style={{
<View style={{ flexDirection: "row" }}> padding: 8,
{!isNaN(currentTrainData?.delay) && flexDirection: "row",
currentTrainData?.delay != 0 && ( borderBottomWidth: 1,
<Text borderBottomColor: "#f0f0f0",
style={{ flex: 1,
fontSize: 15, }}
color: "black", >
position: "absolute", <Text style={{ fontSize: 20 }}>停車駅</Text>
right: 110, <View style={{ flex: 1 }} />
textAlign: "right", <View style={{ flexDirection: "row" }}>
textDecorationLine: "line-through", {!isNaN(currentTrainData?.delay) &&
}} currentTrainData?.delay != 0 && (
> <Text
(定刻) style={{
</Text> fontSize: 15,
)} color: "black",
<Text position: "absolute",
style={{ right: 110,
fontSize: 20, textAlign: "right",
color: isNaN(currentTrainData?.delay) textDecorationLine: "line-through",
? "black" }}
: currentTrainData?.delay == 0 >
? "black" (定刻)
: "red", </Text>
width: 60, )}
}} <Text
> style={{
見込 fontSize: 20,
</Text> color: isNaN(currentTrainData?.delay)
<Text style={{ fontSize: 20, width: 50 }}></Text> ? "black"
: currentTrainData?.delay == 0
? "black"
: "red",
width: 60,
}}
>
見込
</Text>
<Text style={{ fontSize: 20, width: 50 }}></Text>
</View>
</View> </View>
</View> </View>
</View> </View>
{headStation && !isConcatNear && ( {headStation && !isConcatNear && (
<TouchableOpacity <TouchableOpacity
onPress={() => openBackTrainInfo(headStation)} onPress={() => openBackTrainInfo(headStation)}

37
components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js
View File

@ -1,6 +1,10 @@
import * as React from "react"; import * as React from "react";
import { Text, View, StyleSheet, Animated, ScrollView } from "react-native"; import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
import { TrainDataView } from "./TrainDataView"; import { TrainDataView } from "./TrainDataView";
import {
heightPercentageToDP,
widthPercentageToDP,
} from "react-native-responsive-screen";
const Max_Header_Height = 200; const Max_Header_Height = 200;
const Min_Header_Height = 80; const Min_Header_Height = 80;
@ -13,28 +17,36 @@ export const DynamicHeader = ({
openTrainInfo, openTrainInfo,
}) => { }) => {
const animatedHeaderHeight = animHeaderValue.interpolate({ const animatedHeaderHeight = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance], inputRange: [Min_Header_Height, Scroll_Distance],
outputRange: [Max_Header_Height, 0], outputRange: [Max_Header_Height, 0],
extrapolate: "clamp", extrapolate: "clamp",
}); });
const animatedHeaderHeight2 = animHeaderValue.interpolate({ const animatedHeaderHeight2 = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance], inputRange: [0, Scroll_Distance],
outputRange: [0, Min_Header_Height], outputRange: [Max_Header_Height, Min_Header_Height],
extrapolate: "clamp", extrapolate: "clamp",
}); });
const animateHeaderBackgroundColor = animHeaderValue.interpolate({ const animatedHeaderVisible = animHeaderValue.interpolate({
inputRange: [0, Max_Header_Height - Min_Header_Height], inputRange: [Min_Header_Height, Scroll_Distance],
outputRange: ["blue", "red"], outputRange: [1, 0],
extrapolate: "clamp",
});
const animatedHeaderVisible2 = animHeaderValue.interpolate({
inputRange: [Min_Header_Height, Scroll_Distance],
outputRange: [0, 1],
extrapolate: "clamp", extrapolate: "clamp",
}); });
return ( return (
<> <View style={{ position: "relative" }}>
<Animated.View <Animated.View
style={[ style={[
styles.header, styles.header,
{ {
height: animatedHeaderHeight, height: 200,
// backgroundColor: animateHeaderBackgroundColor, backgroundColor: "#0099CC",
opacity: animatedHeaderVisible,
top: 0,
}, },
]} ]}
> >
@ -145,8 +157,10 @@ export const DynamicHeader = ({
styles.header, styles.header,
{ {
height: animatedHeaderHeight2, height: animatedHeaderHeight2,
//backgroundColor: animateHeaderBackgroundColor, backgroundColor: "#0099CC",
margin: 0, margin: 0,
top: 0,
opacity: animatedHeaderVisible2,
}, },
]} ]}
> >
@ -254,7 +268,7 @@ export const DynamicHeader = ({
</View> */} </View> */}
</ScrollView> </ScrollView>
</Animated.View> </Animated.View>
</> </View>
); );
}; };
const styles = StyleSheet.create({ const styles = StyleSheet.create({
@ -264,6 +278,9 @@ const styles = StyleSheet.create({
left: 0, left: 0,
right: 0, right: 0,
//paddingTop: 10, //paddingTop: 10,
position: "absolute",
zIndex: 1,
backgroundColor: "f0f0f0",
}, },
headerText: { headerText: {
color: "#fff", color: "#fff",