- useResponsive()フックを作成(fontScale/verticalScale/moderateScale) - ベースデザイン: iPhone 14 Pro (393x852)、スケールダウンのみ(最大1.0) - DynamicHeaderScrollView: ヘッダー高さにverticalScale適用 - EachTrainInfoCore: maxHeight緩和(70→80%)、ハンドラーサイズスケーリング - StateBox/PositionBox/ScrollStickyContent/HeaderText: fontScale適用 - DataConnectedButton/EachStopList: fontScale+moderateScale適用 - JRSTraInfo/StationDeteilView: ハンドラー+フォントスケーリング - ReloadButton/MapsButton/NewMenu: ボタンサイズ+フォントスケーリング - useDeviceOrientationChange: 全Android端末でisLandscape=false
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import React, { FC } from "react";
|
|
import { View, Text, TouchableWithoutFeedback, Alert } from "react-native";
|
|
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
|
import { useThemeColors } from "@/lib/theme";
|
|
import { useResponsive } from "@/lib/responsive";
|
|
|
|
export const DataConnectedButton: FC<{
|
|
i: string;
|
|
openTrainInfo: (trainNum: string) => void;
|
|
}> = ({ i, openTrainInfo }) => {
|
|
const [station, se, time] = i.split(",");
|
|
const { keyList } = useAllTrainDiagram();
|
|
const { colors } = useThemeColors();
|
|
const { fontScale, moderateScale } = useResponsive();
|
|
// 列番が有効かどうかをチェックする関数
|
|
const isValidTrainNumber = (trainNum: string): boolean => {
|
|
return keyList.includes(trainNum);
|
|
};
|
|
|
|
return (
|
|
<TouchableWithoutFeedback
|
|
onPress={() => {
|
|
// timeの文字列が列番として有効かを検証する
|
|
if (!isValidTrainNumber(time)) {
|
|
Alert.alert(
|
|
"列番が見つかりません",
|
|
`列番「${time}」は時刻表に存在しません。`,
|
|
[{ text: "OK" }]
|
|
);
|
|
return;
|
|
}
|
|
|
|
openTrainInfo(time);
|
|
}}
|
|
key={station + time}
|
|
>
|
|
<View style={{ flexDirection: "row", backgroundColor: colors.backgroundTertiary }}>
|
|
<View
|
|
style={{
|
|
padding: 8,
|
|
flexDirection: "row",
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: colors.borderLight,
|
|
flex: 1,
|
|
}}
|
|
>
|
|
<View
|
|
style={{
|
|
width: moderateScale(35),
|
|
position: "relative",
|
|
marginHorizontal: 15,
|
|
flexDirection: "row",
|
|
height: "10%",
|
|
}}
|
|
/>
|
|
<Text style={{ fontSize: fontScale(16), fontFamily: "DiaPro", color: colors.text }}>
|
|
{se === "増" ? "⬐" : "↳"}
|
|
</Text>
|
|
<Text style={{ fontSize: fontScale(20), color: colors.textLink }}>{time}</Text>
|
|
<View style={{ flex: 1 }} />
|
|
<Text style={{ fontSize: fontScale(18), width: moderateScale(50), color: colors.text }}>
|
|
{se === "増" ? "増結" : "解結"}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</TouchableWithoutFeedback>
|
|
);
|
|
};
|