不要な要素整理
This commit is contained in:
harukin-OneMix4
parent
84c050e928
commit
62d7936425
@ -26,7 +26,6 @@ import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
|
|||||||
import { EachStopList } from "./EachTrainInfo/EachStopList";
|
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 { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
||||||
|
|
||||||
export const EachTrainInfo = (props) => {
|
export const EachTrainInfo = (props) => {
|
||||||
@ -511,15 +510,6 @@ export const EachTrainInfo = (props) => {
|
|||||||
</ScrollView>
|
</ScrollView>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
header={
|
|
||||||
<DynamicHeader
|
|
||||||
animHeaderValue={scrollOffsetY}
|
|
||||||
currentTrainData={currentTrainData}
|
|
||||||
currentPosition={currentPosition}
|
|
||||||
nearTrainIDList={nearTrainIDList}
|
|
||||||
openTrainInfo={openTrainInfo}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
topStickyContent={
|
topStickyContent={
|
||||||
<View
|
<View
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@ -1,291 +0,0 @@
|
|||||||
import * as React from "react";
|
|
||||||
import { Text, View, StyleSheet, Animated, ScrollView } from "react-native";
|
|
||||||
import { TrainDataView } from "./TrainDataView";
|
|
||||||
import {
|
|
||||||
heightPercentageToDP,
|
|
||||||
widthPercentageToDP,
|
|
||||||
} from "react-native-responsive-screen";
|
|
||||||
|
|
||||||
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: [Min_Header_Height, Scroll_Distance],
|
|
||||||
outputRange: [Max_Header_Height, 0],
|
|
||||||
extrapolate: "clamp",
|
|
||||||
});
|
|
||||||
const animatedHeaderHeight2 = animHeaderValue.interpolate({
|
|
||||||
inputRange: [0, Scroll_Distance],
|
|
||||||
outputRange: [Max_Header_Height, Min_Header_Height],
|
|
||||||
extrapolate: "clamp",
|
|
||||||
});
|
|
||||||
const animatedHeaderVisible = animHeaderValue.interpolate({
|
|
||||||
inputRange: [Min_Header_Height, Scroll_Distance],
|
|
||||||
outputRange: [1, 0],
|
|
||||||
extrapolate: "clamp",
|
|
||||||
});
|
|
||||||
const animatedHeaderVisible2 = animHeaderValue.interpolate({
|
|
||||||
inputRange: [Min_Header_Height, Scroll_Distance],
|
|
||||||
outputRange: [0, 1],
|
|
||||||
extrapolate: "clamp",
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<View style={{ position: "relative" }}>
|
|
||||||
<Animated.View
|
|
||||||
style={[
|
|
||||||
styles.header,
|
|
||||||
{
|
|
||||||
height: 200,
|
|
||||||
backgroundColor: "#0099CC",
|
|
||||||
opacity: animatedHeaderVisible,
|
|
||||||
|
|
||||||
top: 0,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<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: "#0099CC",
|
|
||||||
margin: 0,
|
|
||||||
top: 0,
|
|
||||||
opacity: animatedHeaderVisible2,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
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",
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue
Block a user