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

EachTrainInfoの可変を実装

Browse Source
This commit is contained in:
harukin-OneMix4
2024-02-07 00:12:27 +09:00
parent 576d9ae222
commit 49e9ed14bc
4 changed files with 444 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
components/ActionSheetComponents/EachTrainInfo/DynamicHeader.js Normal file
View File

@@ -0,0 +1,274 @@
import * as React from "react";
import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
import { TrainDataView } from "./TrainDataView";
const Max_Header_Height = 200;
const Min_Header_Height = 80;
const Scroll_Distance = Max_Header_Height - Min_Header_Height;
export const DynamicHeader = ({
animHeaderValue,
currentTrainData,
currentPosition,
nearTrainIDList,
openTrainInfo,
}) => {
const animatedHeaderHeight = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance],
outputRange: [Max_Header_Height, 0],
extrapolate: "clamp",
});
const animatedHeaderHeight2 = animHeaderValue.interpolate({
inputRange: [0, Scroll_Distance],
outputRange: [0, Min_Header_Height],
extrapolate: "clamp",
});
const animateHeaderBackgroundColor = animHeaderValue.interpolate({
inputRange: [0, Max_Header_Height - Min_Header_Height],
outputRange: ["blue", "red"],
extrapolate: "clamp",
});
return (
<>
<Animated.View
style={[
styles.header,
{
height: animatedHeaderHeight,
// backgroundColor: animateHeaderBackgroundColor,
},
]}
>
<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}
/>
{/* <View
style={{
flexDirection: "column",
height: heightPercentageToDP("20%"),
flex: 1,
width: widthPercentageToDP("100%"),
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
岡山
</Text>
</View>
<View
style={{
flex: 3,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
宇多津でうずしお号と連結
</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
編成(使用車両：2700系)
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "left",
}}
>
{"[<自][自>][アン自|指>][アン指|G>]"}
</Text>
</View>
</View>
</View> */}
</ScrollView>
</Animated.View>
<Animated.View
style={[
styles.header,
{
height: animatedHeaderHeight2,
//backgroundColor: animateHeaderBackgroundColor,
margin: 0,
},
]}
>
<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}
/>
{/* <View
style={{
flexDirection: "column",
height: heightPercentageToDP("20%"),
flex: 1,
width: widthPercentageToDP("100%"),
}}
>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>行先</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
岡山
</Text>
</View>
<View
style={{
flex: 3,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
車両案内
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "right",
}}
>
宇多津でうずしお号と連結
</Text>
</View>
</View>
<View style={{ flex: 1, flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 15, color: "#0099CC" }}>
編成(使用車両：2700系)
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 20,
color: "#0099CC",
textAlign: "left",
}}
>
{"[<自][自>][アン自|指>][アン指|G>]"}
</Text>
</View>
</View>
</View> */}
</ScrollView>
</Animated.View>
</>
);
};
const styles = StyleSheet.create({
header: {
justifyContent: "center",
alignItems: "center",
left: 0,
right: 0,
//paddingTop: 10,
},
headerText: {
color: "#fff",
fontSize: 25,
fontWeight: "bold",
textAlign: "center",
},
});