現在時刻が表示されたり走行位置から列車時刻を更新したりアニメーションを強化した
This commit is contained in:
44
components/StationDiagram/ExGridViewTimePositionItem.tsx
Normal file
44
components/StationDiagram/ExGridViewTimePositionItem.tsx
Normal file
@@ -0,0 +1,44 @@
|
||||
import { FC } from "react";
|
||||
import { View } from "react-native";
|
||||
import dayjs from "dayjs";
|
||||
import { SharedValue, useAnimatedStyle } from "react-native-reanimated";
|
||||
import Animated from "react-native-reanimated";
|
||||
|
||||
export const ExGridViewTimePositionItem: FC<{
|
||||
width: SharedValue<number>;
|
||||
hour: string;
|
||||
}> = ({ width, hour }) => {
|
||||
const date = dayjs();
|
||||
const formattedTime = date.format("m");
|
||||
const formattedHour = date.format("H");
|
||||
|
||||
// if(typeString == "回送"){
|
||||
// return<></>;
|
||||
// }
|
||||
const animatedStyle = useAnimatedStyle(() => {
|
||||
const leftPosition =
|
||||
((((width.value - 50) / 100) * parseInt(formattedTime)) / 60) * 100;
|
||||
return {
|
||||
left: leftPosition,
|
||||
};
|
||||
}, [formattedTime]);
|
||||
if (formattedHour != hour) return <></>;
|
||||
return (
|
||||
<View style={{ left: 0, height: 50, width: 1 }}>
|
||||
<Animated.View
|
||||
style={[
|
||||
{
|
||||
flexDirection: "column",
|
||||
borderLeftWidth: 2,
|
||||
//borderBottomWidth: 0.5,
|
||||
borderStyle: "solid",
|
||||
borderColor: "red",
|
||||
position: "absolute",
|
||||
height: "100%",
|
||||
},
|
||||
animatedStyle,
|
||||
]}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
};
|
Reference in New Issue
Block a user