harukin-expo-dev-env
a1830ae94a
iOS (isModal=true) でマリンライナー等の走行中列車を表示した際に
ActionSheet のスライドアップアニメーションが瞬間表示になる問題を修正。
【根本原因】
1. iOS onOpen の発火タイミング問題（最重要）
- ライブラリ内で onOpen が Modal.onShow にバインドされており、
スプリングアニメーション開始「前」に発火する
- onOpen 後に showThrew=true になると通過駅が追加されて高さが増加し
onSheetLayout が再発火 → スプリングがほぼ終点からリスタート
2. useEffect による非同期な高さ変化
- useThroughStations / useStopStationIDs / useTrainDiagramData が
useState([]) で初期化し useEffect で計算していたため
空リスト → フルリストの高さ変化が onSheetLayout をトリガーしていた
3. useAutoScroll の InteractionManager が Reanimated アニメーションを認識しない
【修正内容】
- EachTrainInfoCore: showThrew の初期値を useState(() => !!getCurrentStationData(...))
に変更し、走行中なら最初から true にして高さ変化を防ぐ
- useTrainDiagramData / useThroughStations / useStopStationIDs:
純粋計算関数を抽出し useState lazy initializer で初回レンダリング時から正確な高さを確保
- EachTrainInfo: onOpen/onClose で sheetOpened state を管理し EachTrainInfoCore に渡す
- useAutoScroll: setShowThrew 引数を削除、sheetOpened フラグでスクロールをゲート
349 lines
11 KiB
TypeScript
349 lines
11 KiB
TypeScript
import React, { useEffect, useRef, useState } from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
StyleSheet,
|
|
useWindowDimensions,
|
|
BackHandler,
|
|
Linking,
|
|
} from "react-native";
|
|
import { SheetManager } from "react-native-actions-sheet";
|
|
import { getTrainType } from "../../lib/getTrainType";
|
|
import { customTrainDataDetector } from "../custom-train-data";
|
|
import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
|
|
import { EachStopList } from "./EachTrainInfo/EachStopList";
|
|
import { DataConnectedButton } from "./EachTrainInfo/DataConnectedButton";
|
|
import { DynamicHeaderScrollView } from "../DynamicHeaderScrollView";
|
|
import { LongHeader } from "./EachTrainInfo/LongHeader";
|
|
import { ShortHeader } from "./EachTrainInfo/ShortHeader";
|
|
import { ScrollStickyContent } from "./EachTrainInfo/ScrollStickyContent";
|
|
import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
|
|
import { useTrainMenu } from "../../stateBox/useTrainMenu";
|
|
import { HeaderText } from "./EachTrainInfoCore/HeaderText";
|
|
import { useStationList } from "../../stateBox/useStationList";
|
|
import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
|
|
import { useThemeColors } from "@/lib/theme";
|
|
import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
|
|
import { useResponsive } from "@/lib/responsive";
|
|
|
|
// Custom hooks
|
|
import { useTrainDiagramData } from "./EachTrainInfoCore/hooks/useTrainDiagramData";
|
|
import { useThroughStations } from "./EachTrainInfoCore/hooks/useThroughStations";
|
|
import { useNearbyTrains } from "./EachTrainInfoCore/hooks/useNearbyTrains";
|
|
import { useStopStationIDs } from "./EachTrainInfoCore/hooks/useStopStationIDs";
|
|
import { useTrainPosition } from "./EachTrainInfoCore/hooks/useTrainPosition";
|
|
import { useAutoScroll } from "./EachTrainInfoCore/hooks/useAutoScroll";
|
|
import { useExtendedStations } from "./EachTrainInfoCore/hooks/useExtendedStations";
|
|
|
|
export const EachTrainInfoCore = ({
|
|
actionSheetRef,
|
|
data,
|
|
openStationACFromEachTrainInfo,
|
|
from,
|
|
navigate,
|
|
sheetOpened = false,
|
|
}) => {
|
|
const { stationList } = useStationList();
|
|
const { allCustomTrainData } = useAllTrainDiagram();
|
|
const { colors, fixed } = useThemeColors();
|
|
const { verticalScale, moderateScale } = useResponsive();
|
|
const { setTrainInfo } = useTrainMenu();
|
|
const { height } = useWindowDimensions();
|
|
const { isLandscape } = useDeviceOrientationChange();
|
|
const { getCurrentStationData } = useCurrentTrain();
|
|
|
|
const scrollRef = useRef<any>(null);
|
|
// Custom hooks for data management
|
|
const { trainData, setTrainData, trueTrainID } = useTrainDiagramData(
|
|
data.trainNum
|
|
);
|
|
const { trainDataWithThrough, haveThrough } = useThroughStations(trainData);
|
|
const { headStation, tailStation, nearTrainIDList } = useNearbyTrains(
|
|
data.trainNum,
|
|
trainData
|
|
);
|
|
const stopStationIDList = useStopStationIDs(trainDataWithThrough);
|
|
const { currentTrainData, currentPosition, points, pointsDisplay } =
|
|
useTrainPosition(data.trainNum, stopStationIDList);
|
|
|
|
const {
|
|
showHeadStation,
|
|
showTailStation,
|
|
extendToHeadStation,
|
|
extendToTailStation,
|
|
} = useExtendedStations(trainData, setTrainData);
|
|
|
|
// UI state
|
|
// 走行中の列車は初期状態から通過駅を表示する（後から showThrew を true に変更すると
|
|
// ActionSheet の onSheetLayout が再発火してスプリングアニメーションが途中でリスタートするため）
|
|
const [showThrew, setShowThrew] = useState(() => !!getCurrentStationData(data.trainNum));
|
|
const [isJumped, setIsJumped] = useState(false);
|
|
|
|
// Auto scroll to current position
|
|
useAutoScroll(
|
|
points,
|
|
trainDataWithThrough,
|
|
scrollRef,
|
|
isJumped,
|
|
setIsJumped,
|
|
sheetOpened
|
|
);
|
|
|
|
// Back button handler
|
|
useEffect(() => {
|
|
const backAction = () => {
|
|
SheetManager.hide("EachTrainInfo");
|
|
return true;
|
|
};
|
|
const backHandler = BackHandler.addEventListener(
|
|
"hardwareBackPress",
|
|
backAction
|
|
);
|
|
return () => backHandler.remove();
|
|
}, []);
|
|
|
|
const customTrainType = getTrainType({
|
|
type: customTrainDataDetector(data.trainNum, allCustomTrainData).type,
|
|
});
|
|
|
|
const openTrainInfo = (trainNum) => {
|
|
const train = customTrainDataDetector(trainNum, allCustomTrainData);
|
|
|
|
let trainNumber = "";
|
|
if (train.train_num_distance && !isNaN(Number(train.train_num_distance))) {
|
|
const numericPart = parseInt(trainNum.replace("M", "").replace("D", ""));
|
|
trainNumber = `${numericPart - Number(train.train_num_distance)}号`;
|
|
}
|
|
|
|
const limitedData = getTrainType({ type: train.type });
|
|
const payload = {
|
|
data: {
|
|
trainNum,
|
|
limited: `${limitedData.data}:${train.train_name}${trainNumber}`,
|
|
},
|
|
navigate,
|
|
from: from === "LED" ? "LED2" : "NearTrainDiagramView",
|
|
};
|
|
|
|
if (isLandscape) {
|
|
setTrainInfo(payload.data);
|
|
} else {
|
|
SheetManager.hide("EachTrainInfo").then(() => {
|
|
setTimeout(() => {
|
|
SheetManager.show("EachTrainInfo", { payload });
|
|
}, 200);
|
|
});
|
|
}
|
|
};
|
|
|
|
return (
|
|
<View
|
|
style={{
|
|
backgroundColor: fixed.primary,
|
|
borderTopLeftRadius: 5,
|
|
borderTopRightRadius: 5,
|
|
borderColor: colors.border,
|
|
borderWidth: 1,
|
|
}}
|
|
>
|
|
<View style={{ height: verticalScale(26), width: "100%" }}>
|
|
<View
|
|
style={{
|
|
height: verticalScale(6),
|
|
width: moderateScale(45),
|
|
borderRadius: 100,
|
|
backgroundColor: colors.borderLight,
|
|
marginVertical: 10,
|
|
alignSelf: "center",
|
|
}}
|
|
/>
|
|
</View>
|
|
<HeaderText
|
|
data={data}
|
|
trainData={trainData}
|
|
showHeadStation={showHeadStation}
|
|
showTailStation={showTailStation}
|
|
headStation={headStation}
|
|
tailStation={tailStation}
|
|
navigate={navigate}
|
|
from={from}
|
|
fontLoaded={true}
|
|
scrollRef={scrollRef}
|
|
/>
|
|
|
|
<DynamicHeaderScrollView
|
|
from={from}
|
|
styles={styles as any}
|
|
scrollRef={scrollRef}
|
|
containerProps={{
|
|
style: {
|
|
maxHeight: height * 0.7,
|
|
backgroundColor:
|
|
customTrainType.data === "notService" ? "#777777ff" : colors.surface,
|
|
},
|
|
}}
|
|
shortHeader={
|
|
<ShortHeader
|
|
{...{
|
|
currentTrainData,
|
|
currentPosition,
|
|
nearTrainIDList,
|
|
openTrainInfo,
|
|
navigate,
|
|
}}
|
|
/>
|
|
}
|
|
longHeader={
|
|
<LongHeader
|
|
{...{
|
|
currentTrainData,
|
|
currentPosition,
|
|
nearTrainIDList,
|
|
openTrainInfo,
|
|
navigate,
|
|
}}
|
|
/>
|
|
}
|
|
topStickyContent={
|
|
<ScrollStickyContent
|
|
{...{ currentTrainData, showThrew, setShowThrew, haveThrough }}
|
|
/>
|
|
}
|
|
>
|
|
{customTrainType.data === "notService" && (
|
|
<Text style={{ backgroundColor: colors.surface, color: colors.text, fontWeight: "bold" }}>
|
|
この列車には乗車できません。
|
|
</Text>
|
|
)}
|
|
{headStation.length > 0 &&
|
|
headStation.map(
|
|
(item, index) =>
|
|
!showHeadStation.includes(index) && (
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
extendToHeadStation(item.station, item.dia, index)
|
|
}
|
|
style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
|
|
key={`${item.station}-head${index}`}
|
|
>
|
|
<Text style={[styles.extendStationText, { color: colors.text }]}>
|
|
「本当の始発駅」を表示
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
)}
|
|
<ShowSpecialTrain
|
|
isTrainDataNothing={trainData.length === 0}
|
|
setTrainData={setTrainData}
|
|
trueTrainID={trueTrainID}
|
|
/>
|
|
{!trainData.length && (
|
|
<TouchableOpacity
|
|
onPress={() =>
|
|
Linking.openURL(`https://twitter.com/search?q=${data.trainNum}`)
|
|
}
|
|
style={[styles.twitterSearchButton, { borderColor: colors.textAccent, backgroundColor: colors.backgroundOverlay }]}
|
|
>
|
|
<Text style={[styles.extendStationText, { color: colors.text }]}>Twitterで検索</Text>
|
|
</TouchableOpacity>
|
|
)}
|
|
{trainDataWithThrough.map((item, index, array) =>
|
|
item.split(",")[1] === "増" || item.split(",")[1] === "解" ? (
|
|
<DataConnectedButton
|
|
i={item}
|
|
key={`${item}-data`}
|
|
openTrainInfo={openTrainInfo}
|
|
/>
|
|
) : item.split(",")[1].includes(".") ? (
|
|
<React.Fragment key={`${item}-skip`} />
|
|
) : (
|
|
<EachStopList
|
|
i={item}
|
|
index={index}
|
|
stationList={stationList as any}
|
|
points={pointsDisplay?.[index] || false}
|
|
currentTrainData={currentTrainData as any}
|
|
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
|
|
showThrew={showThrew}
|
|
array={array}
|
|
isNotService={customTrainType.data === "notService"}
|
|
key={`${item}-stop`}
|
|
/>
|
|
)
|
|
)}
|
|
<Text style={[styles.customDataNote, { color: colors.textSecondary }]}>
|
|
時刻が斜体,青色になっている時刻はコミュニティで追加されている独自データです。
|
|
</Text>
|
|
{tailStation.length > 0 &&
|
|
tailStation.map(
|
|
({ station, dia }, index) =>
|
|
!showTailStation.includes(index) && (
|
|
<TouchableOpacity
|
|
onPress={() => extendToTailStation(station, dia, index)}
|
|
style={[styles.extendStationButton, { borderColor: colors.textAccent }]}
|
|
key={`${station}-tail${index}`}
|
|
>
|
|
<Text style={[styles.extendStationText, { color: colors.text }]}>
|
|
「本当の終着駅」を表示
|
|
</Text>
|
|
</TouchableOpacity>
|
|
)
|
|
)}
|
|
|
|
<View style={[styles.bottomSpacer, { borderBottomColor: colors.borderLight }]} />
|
|
</DynamicHeaderScrollView>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const styles = StyleSheet.create({
|
|
header: {
|
|
justifyContent: "center",
|
|
alignItems: "center",
|
|
left: 0,
|
|
right: 0,
|
|
position: "absolute",
|
|
zIndex: 1,
|
|
backgroundColor: "f0f0f0",
|
|
},
|
|
headerText: {
|
|
color: "#fff",
|
|
fontSize: 25,
|
|
fontWeight: "bold",
|
|
textAlign: "center",
|
|
},
|
|
extendStationButton: {
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
borderColor: "blue",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
},
|
|
extendStationText: {
|
|
fontSize: 18,
|
|
fontWeight: "bold",
|
|
},
|
|
twitterSearchButton: {
|
|
padding: 10,
|
|
flexDirection: "row",
|
|
borderColor: "blue",
|
|
borderWidth: 1,
|
|
margin: 10,
|
|
borderRadius: 5,
|
|
alignItems: "center",
|
|
backgroundColor: "#ffffffc2",
|
|
},
|
|
customDataNote: {
|
|
},
|
|
bottomSpacer: {
|
|
flexDirection: "row",
|
|
padding: 8,
|
|
borderBottomWidth: 1,
|
|
borderBottomColor: "#f0f0f0",
|
|
flex: 1,
|
|
},
|
|
});
|