列車情報表示機能の詳細デザイン作成
This commit is contained in:
harukin-OneMix4
parent
ea1c505453
commit
a643ab5c56
53
Apps.js
53
Apps.js
@ -140,7 +140,7 @@ export default function Apps({
|
||||
|
||||
if (returnDataBase.length) {
|
||||
setStationBoardData(returnDataBase);
|
||||
StationBoardAcSR.current?.setModalVisible();
|
||||
StationBoardAcSR.current?.show();
|
||||
} else {
|
||||
setStationBoardData(undefined);
|
||||
StationBoardAcSR.current?.hide();
|
||||
@ -151,7 +151,7 @@ export default function Apps({
|
||||
const { trainNum, limited } = dataSet;
|
||||
//alert(trainNum, limited);
|
||||
setTrainInfo({ trainNum, limited });
|
||||
EachTrainInfoAsSR.current?.setModalVisible();
|
||||
EachTrainInfoAsSR.current?.show();
|
||||
return;
|
||||
}
|
||||
default: {
|
||||
@ -179,7 +179,48 @@ export default function Apps({
|
||||
}
|
||||
}
|
||||
};
|
||||
function sleep(waitSec, callbackFunc) {
|
||||
// 経過時間（秒）
|
||||
var spanedSec = 0;
|
||||
|
||||
// 1秒間隔で無名関数を実行
|
||||
var id = setInterval(function () {
|
||||
spanedSec++;
|
||||
|
||||
// 経過時間 >= 待機時間の場合、待機終了。
|
||||
if (spanedSec >= waitSec) {
|
||||
// タイマー停止
|
||||
clearInterval(id);
|
||||
|
||||
// 完了時、コールバック関数を実行
|
||||
if (callbackFunc) callbackFunc();
|
||||
}
|
||||
}, 1);
|
||||
}
|
||||
|
||||
const openStationACFromEachTrainInfo = (stationName) => {
|
||||
EachTrainInfoAsSR.current?.hide();
|
||||
const findStationEachLine = (selectLine) => {
|
||||
let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
|
||||
return NearStation;
|
||||
};
|
||||
let returnDataBase = lineList
|
||||
.map((d) => findStationEachLine(originalStationList[d]))
|
||||
.filter((d) => d.length > 0)
|
||||
.reduce((pre, current) => {
|
||||
pre.push(...current);
|
||||
return pre;
|
||||
}, []);
|
||||
if (returnDataBase.length) {
|
||||
setStationBoardData(returnDataBase);
|
||||
sleep(8, function () {
|
||||
StationBoardAcSR.current?.show();
|
||||
});
|
||||
} else {
|
||||
setStationBoardData(undefined);
|
||||
StationBoardAcSR.current?.hide();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<View
|
||||
style={{
|
||||
@ -235,7 +276,6 @@ export default function Apps({
|
||||
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
|
||||
/>
|
||||
|
||||
<EachTrainInfo setRef={EachTrainInfoAsSR} data={trainInfo} />
|
||||
<StationDeteilView
|
||||
StationBoardAcSR={StationBoardAcSR}
|
||||
currentStation={stationBoardData}
|
||||
@ -249,6 +289,13 @@ export default function Apps({
|
||||
navigate("Apps");
|
||||
}}
|
||||
/>
|
||||
<EachTrainInfo
|
||||
setRef={EachTrainInfoAsSR}
|
||||
data={trainInfo}
|
||||
navigate={navigate}
|
||||
originalStationList={originalStationList}
|
||||
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,14 +6,33 @@ import {
|
||||
Linking,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
TouchableWithoutFeedback,
|
||||
TouchableHighlight,
|
||||
} from "react-native";
|
||||
import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
|
||||
import ActionSheet from "react-native-actions-sheet";
|
||||
import LottieView from "lottie-react-native";
|
||||
import trainList from "../../assets/originData/trainList";
|
||||
import { lineList } from "../../lib/getStationList";
|
||||
import { heightPercentageToDP } from "react-native-responsive-screen";
|
||||
import lineColorList from "../../assets/originData/lineColorList";
|
||||
|
||||
export const EachTrainInfo = ({ setRef, data }) => {
|
||||
export const EachTrainInfo = ({
|
||||
setRef,
|
||||
data,
|
||||
navigate,
|
||||
originalStationList,
|
||||
openStationACFromEachTrainInfo,
|
||||
}) => {
|
||||
const [trainData, setTrainData] = useState([]);
|
||||
const stationList =
|
||||
originalStationList &&
|
||||
lineList.map((d) =>
|
||||
originalStationList[d].map((a) => ({
|
||||
StationNumber: a.StationNumber,
|
||||
StationName: a.Station_JP,
|
||||
}))
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data.trainNum) return;
|
||||
@ -75,17 +94,26 @@ export const EachTrainInfo = ({ setRef, data }) => {
|
||||
<Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
|
||||
{data.trainNum}
|
||||
</Text>
|
||||
<Ionicons
|
||||
name="reload"
|
||||
color="white"
|
||||
size={30}
|
||||
style={{ margin: 5 }}
|
||||
onPress={() => {
|
||||
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
|
||||
}}
|
||||
/>
|
||||
{data.limited != undefined &&
|
||||
getType(data.limited.split(":")[0]) &&
|
||||
!data.limited.split(":")[1].match("サンポート") && (
|
||||
<Ionicons
|
||||
name="subway"
|
||||
color="white"
|
||||
size={30}
|
||||
style={{ margin: 5 }}
|
||||
onPress={() => {
|
||||
LayoutAnimation.easeInEaseOut(); //setLoadingDelayData(true);
|
||||
|
||||
navigate("trainbase", {
|
||||
info: "train.html?tn=" + data.trainNum,
|
||||
});
|
||||
setRef.current?.hide();
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</View>
|
||||
<ScrollView>
|
||||
<ScrollView style={{ maxHeight: heightPercentageToDP("70%") }}>
|
||||
<View
|
||||
style={{
|
||||
padding: 10,
|
||||
@ -103,7 +131,102 @@ export const EachTrainInfo = ({ setRef, data }) => {
|
||||
/>
|
||||
<Text>ほげほげふがふが</Text> */}
|
||||
{trainData.map((i, index) => {
|
||||
return <Text>{i}</Text>;
|
||||
const [station, se, time] = i.split(",");
|
||||
const Stations = stationList.map((a) =>
|
||||
a.filter((d) => d.StationName == station)
|
||||
);
|
||||
const StationNumbers =
|
||||
Stations &&
|
||||
Stations.reduce((newArray, e) => {
|
||||
return newArray.concat(e);
|
||||
}, [])
|
||||
.filter((d) => d.StationNumber)
|
||||
.map((d) => d.StationNumber);
|
||||
|
||||
const colorIDs =
|
||||
StationNumbers != null
|
||||
? StationNumbers.map((d) => {
|
||||
console.log(d);
|
||||
return d.split("").filter((s) => "A" < s && s < "Z");
|
||||
}).reduce((newArray, e) => {
|
||||
return newArray.concat(e);
|
||||
}, [])
|
||||
: [];
|
||||
const EachIDs =
|
||||
StationNumbers != null
|
||||
? StationNumbers.map((d) => {
|
||||
console.log(d);
|
||||
return d
|
||||
.split("")
|
||||
.filter((s) => "0" <= s && s <= "9")
|
||||
.join("");
|
||||
})
|
||||
: [];
|
||||
return (
|
||||
<TouchableWithoutFeedback
|
||||
onPress={() => openStationACFromEachTrainInfo(station)}
|
||||
key={station}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
padding: 8,
|
||||
flexDirection: "row",
|
||||
borderBottomWidth: 1,
|
||||
borderBottomColor: "#f0f0f0",
|
||||
paddingLeft: 60,
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
position: "absolute",
|
||||
left: 10,
|
||||
top: 0,
|
||||
flexDirection: "row",
|
||||
}}
|
||||
>
|
||||
{colorIDs.map((color, index) => (
|
||||
<View
|
||||
style={{
|
||||
backgroundColor: lineColorList[color],
|
||||
flex: 1,
|
||||
}}
|
||||
key={color}
|
||||
>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{colorIDs[index]}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
textAlign: "center",
|
||||
fontSize: 10,
|
||||
fontWeight: "bold",
|
||||
}}
|
||||
>
|
||||
{EachIDs[index]}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
))}
|
||||
</View>
|
||||
<Text style={{ fontSize: 20 }}>{station}</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ fontSize: 20 }}>
|
||||
{time} {se}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableWithoutFeedback>
|
||||
);
|
||||
})}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user