779 lines
26 KiB
JavaScript
779 lines
26 KiB
JavaScript
import React, { Component, useRef, useState, useEffect } from "react";
|
||
import {
|
||
StatusBar,
|
||
Platform,
|
||
View,
|
||
LayoutAnimation,
|
||
ScrollView,
|
||
Linking,
|
||
Text,
|
||
TouchableOpacity,
|
||
} from "react-native";
|
||
import Image from "react-native-remote-svg";
|
||
import Constants from "expo-constants";
|
||
import { List, ListItem } from "native-base";
|
||
import Icon from "react-native-vector-icons/Entypo";
|
||
import * as Location from "expo-location";
|
||
import StatusbarDetect from "./StatusbarDetect";
|
||
var Status = StatusbarDetect();
|
||
import { useNavigation } from "@react-navigation/native";
|
||
import AutoHeightImage from "react-native-auto-height-image";
|
||
import {
|
||
widthPercentageToDP as wp,
|
||
heightPercentageToDP as hp,
|
||
} from "react-native-responsive-screen";
|
||
import {
|
||
FontAwesome,
|
||
Fontisto,
|
||
Foundation,
|
||
Ionicons,
|
||
MaterialCommunityIcons,
|
||
} from "@expo/vector-icons";
|
||
import * as WebBrowser from "expo-web-browser";
|
||
import ActionSheet from "react-native-actions-sheet";
|
||
import LottieView from "lottie-react-native";
|
||
import SvgUri from "react-native-svg-uri";
|
||
import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
|
||
|
||
import 予讃線 from "./assets/四国旅客鉄道予讃線.json";
|
||
import 土讃線 from "./assets/四国旅客鉄道土讃線.json";
|
||
import 高徳線 from "./assets/四国旅客鉄道高徳線.json";
|
||
import 内子線 from "./assets/四国旅客鉄道内子線.json";
|
||
import 徳島線 from "./assets/四国旅客鉄道徳島線.json";
|
||
import 鳴門線 from "./assets/四国旅客鉄道鳴門線.json";
|
||
import LED_vision from "./components/発車時刻表/LED_vidion";
|
||
import Sign from "./components/駅名表/Sign";
|
||
|
||
import { UsefulBox } from "./components/atom/UsefulBox";
|
||
import { TicketBox } from "./components/atom/TicketBox";
|
||
import { TextBox } from "./components/atom/TextBox";
|
||
import { getStationList } from "./lib/getStationList";
|
||
|
||
export default function Menu(props) {
|
||
const {
|
||
navigation: { navigate },
|
||
} = props;
|
||
const JRSTraInfoEXAcSR = useRef(null);
|
||
const StationBoardAcSR = useRef(null);
|
||
const navigation = useNavigation();
|
||
|
||
//位置情報
|
||
const [location, setLocation] = useState(null);
|
||
const [errorMsg, setErrorMsg] = useState(null);
|
||
useEffect(() => {
|
||
Location.requestForegroundPermissionsAsync().then((data) => {
|
||
if (data.status !== "granted") {
|
||
setErrorMsg("Permission to access location was denied");
|
||
return () => {};
|
||
}
|
||
Location.getCurrentPositionAsync({}).then((location) =>
|
||
setLocation(location)
|
||
);
|
||
});
|
||
setInterval(() => {
|
||
Location.getCurrentPositionAsync({}).then((location) =>
|
||
setLocation(location)
|
||
);
|
||
}, 10000);
|
||
}, []);
|
||
|
||
const [originalStationList, setOriginalStationList] = useState();
|
||
useEffect(() => {
|
||
getStationList().then((stationList) => {
|
||
console.log(stationList);
|
||
setOriginalStationList(stationList);
|
||
});
|
||
}, []);
|
||
|
||
const [stationName, setStationName] = useState(undefined);
|
||
const [currentStation, setCurrentStation] = useState(undefined);
|
||
useEffect(() => {
|
||
if (!location) return () => {};
|
||
if (!originalStationList) return () => {};
|
||
const findStationEachLine = (selectLine) => {
|
||
const searchArea = 0.0015;
|
||
const _calcDistance = (from, to) => {
|
||
let lat = Math.abs(from.lat - to.lat);
|
||
let lng = Math.abs(from.lng - to.lng);
|
||
return Math.sqrt(lat * lat + lng * lng);
|
||
};
|
||
let NearStation = selectLine.filter(
|
||
(d) =>
|
||
_calcDistance(d, {
|
||
lat: location.coords.latitude,
|
||
lng: location.coords.longitude,
|
||
}) < searchArea
|
||
);
|
||
return NearStation;
|
||
};
|
||
|
||
const lineList = [
|
||
"予讃線",
|
||
"松宇線",
|
||
"伊予灘線",
|
||
"土讃線",
|
||
"窪川線",
|
||
"高徳線",
|
||
"徳島線",
|
||
"鳴門線",
|
||
];
|
||
console.log(
|
||
lineList
|
||
.map((d) => findStationEachLine(originalStationList[d]))
|
||
.filter((d) => d.length > 0)
|
||
.reduce((pre, current) => {
|
||
pre.push(...current);
|
||
return pre;
|
||
}, [])
|
||
);
|
||
let returnDataBase = lineList
|
||
.map((d) => findStationEachLine(originalStationList[d]))
|
||
.filter((d) => d.length > 0)
|
||
.reduce((pre, current) => {
|
||
pre.push(...current);
|
||
return pre;
|
||
}, []);
|
||
LayoutAnimation.spring();
|
||
if (returnDataBase.length) {
|
||
let currentStation = currentStation == undefined ? [] : currentStation;
|
||
if (currentStation.toString() != returnDataBase.toString()) {
|
||
setCurrentStation(returnDataBase);
|
||
}
|
||
} else {
|
||
setCurrentStation(undefined);
|
||
StationBoardAcSR.current?.hide();
|
||
}
|
||
}, [location, originalStationList]);
|
||
|
||
useEffect(() => {
|
||
console.log("test");
|
||
console.log(currentStation);
|
||
}, [currentStation]);
|
||
|
||
const LottieRef = useRef(null);
|
||
const LottieRef2 = useRef(null);
|
||
const [count, setCount] = useState(0);
|
||
const [delayData, setDelayData] = useState(undefined);
|
||
const [getTime, setGetTime] = useState(new Date());
|
||
const [loadingDelayData, setLoadingDelayData] = useState(true);
|
||
|
||
useEffect(() => {
|
||
fetch(
|
||
"https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
|
||
)
|
||
.then((response) => response.text())
|
||
.then((data) => {
|
||
if (data != "") {
|
||
setDelayData(data.split("^"));
|
||
} else setDelayData(null);
|
||
})
|
||
.then((data) => LayoutAnimation.easeInEaseOut())
|
||
.then(() => setGetTime(new Date()))
|
||
.finally(() => setLoadingDelayData(false));
|
||
}, [loadingDelayData]);
|
||
|
||
useEffect(() => {
|
||
try {
|
||
LottieRef?.current.play();
|
||
LottieRef2?.current.play();
|
||
} catch (e) {}
|
||
});
|
||
return (
|
||
<View
|
||
style={{
|
||
height: "100%",
|
||
backgroundColor: "white",
|
||
paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
|
||
}}
|
||
>
|
||
{Status}
|
||
<View style={{ alignItems: "center" }}>
|
||
<TouchableOpacity
|
||
onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
|
||
>
|
||
<AutoHeightImage
|
||
source={require("./assets/Header.png")}
|
||
resizeMode="contain"
|
||
width={wp("100%")}
|
||
/>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<ScrollView>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<UsefulBox
|
||
backgroundColor={"#F89038"}
|
||
icon="train-car"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/")
|
||
}
|
||
>
|
||
駅・鉄道情報
|
||
</UsefulBox>
|
||
<UsefulBox
|
||
backgroundColor={"#EA4752"}
|
||
icon="google-spreadsheet"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
||
)
|
||
}
|
||
>
|
||
運賃表
|
||
</UsefulBox>
|
||
<UsefulBox
|
||
backgroundColor={"#91C31F"}
|
||
icon="clipboard-list-outline"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/e5489/")
|
||
}
|
||
>
|
||
予約
|
||
</UsefulBox>
|
||
</View>
|
||
<TextBox
|
||
backgroundColor="#0099CC"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
|
||
)
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
||
新型コロナウイルスに関するお知らせ
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 15 }}>
|
||
列車の運行計画・混雑状況・感染症対策への取り組み
|
||
</Text>
|
||
</TextBox>
|
||
{currentStation && (
|
||
<Sign
|
||
currentStation={currentStation}
|
||
originalStationList={originalStationList}
|
||
oP={() => StationBoardAcSR.current?.setModalVisible()}
|
||
/>
|
||
)}
|
||
{currentStation && <LED_vision station={currentStation[0]} />}
|
||
<TouchableOpacity
|
||
onPress={() => {
|
||
JRSTraInfoEXAcSR.current?.setModalVisible();
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderRadius: 5,
|
||
margin: 10,
|
||
borderColor: "black",
|
||
borderWidth: 2,
|
||
overflow: "hidden",
|
||
}}
|
||
>
|
||
<ScrollView
|
||
scrollEnabled={false}
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderRadius: 5,
|
||
maxHeight: 300,
|
||
}}
|
||
>
|
||
<View
|
||
style={{
|
||
padding: 10,
|
||
flexDirection: "row",
|
||
alignItems: "center",
|
||
}}
|
||
>
|
||
<Text
|
||
style={{ fontSize: 30, fontWeight: "bold", color: "white" }}
|
||
>
|
||
列車遅延速報EX
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{ fontSize: 30, fontWeight: "bold", color: "white" }}
|
||
>
|
||
{getTime
|
||
? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
|
||
":" +
|
||
getTime.toLocaleTimeString("ja-JP").split(":")[1]
|
||
: NaN}
|
||
</Text>
|
||
<Ionicons
|
||
name="reload"
|
||
color="white"
|
||
size={30}
|
||
style={{ margin: 5 }}
|
||
onPress={() => {
|
||
LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
|
||
}}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{
|
||
padding: 10,
|
||
backgroundColor: "white",
|
||
borderBottomLeftRadius: 5,
|
||
borderBottomRightRadius: 5,
|
||
}}
|
||
>
|
||
{loadingDelayData ? (
|
||
<View style={{ alignItems: "center" }}>
|
||
<LottieView
|
||
ref={LottieRef}
|
||
style={{
|
||
width: 150,
|
||
height: 150,
|
||
backgroundColor: "#fff",
|
||
}}
|
||
source={require("./assets/51690-loading-diamonds.json")}
|
||
/>
|
||
</View>
|
||
) : delayData ? (
|
||
delayData.map((d) => {
|
||
let data = d.split(" ");
|
||
return (
|
||
<View style={{ flexDirection: "row" }}>
|
||
<Text style={{ flex: 15, fontSize: 20 }}>
|
||
{data[0].replace("\n", "")}
|
||
</Text>
|
||
<Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
|
||
<Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
|
||
</View>
|
||
);
|
||
})
|
||
) : (
|
||
<Text>現在、5分以上の遅れはありません。</Text>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
<View
|
||
style={{
|
||
position: "absolute",
|
||
top: 250,
|
||
alignItems: "center",
|
||
width: "100%",
|
||
height: 50,
|
||
backgroundColor: "#007FCC88",
|
||
}}
|
||
>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{ color: "white", fontWeight: "bold", fontSize: 20 }}
|
||
>
|
||
詳細を見る
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
</View>
|
||
</View>
|
||
</TouchableOpacity>
|
||
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TicketBox
|
||
backgroundColor={"#AD7FA8"}
|
||
icon={<Foundation name="ticket" color="white" size={50} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-eki.com/ticket/brand")
|
||
}
|
||
>
|
||
トクトク切符
|
||
</TicketBox>
|
||
<TicketBox
|
||
backgroundColor={"#8F5902"}
|
||
icon={<FontAwesome name="first-order" color="white" size={50} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://www.jr-shikoku.co.jp/01_trainbus/event_train/sp/"
|
||
)
|
||
}
|
||
>
|
||
観光列車
|
||
</TicketBox>
|
||
<TicketBox
|
||
backgroundColor={"#888A85"}
|
||
icon={<Ionicons name="flag" color="white" size={50} />}
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-eki.com/tour/brand")
|
||
}
|
||
>
|
||
旅行ツアー
|
||
</TicketBox>
|
||
</View>
|
||
<TextBox
|
||
backgroundColor="#0099CC"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL(
|
||
"https://www.jr-shikoku.co.jp/sp/index.html#menu-box"
|
||
)
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
臨時列車などのお知らせ
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
区間縮小・計画運休・イベント・季節臨時列車など
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#0099CC"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/03_news/press/")
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
ニュースリリース
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
公式プレス記事はこちら
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#0099CC"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/teiki/")
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
定期運賃計算
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
通常/学生/快て〜き等はこちら
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="#0099CC"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://www.jr-shikoku.co.jp/04_company/group/sp/")
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
JR四国のお店・サービス
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
JR四国グループの施設をご案内
|
||
</Text>
|
||
</TextBox>
|
||
<View style={{ flexDirection: "row" }}>
|
||
<TouchableOpacity
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "#729FCF",
|
||
borderColor: "#0099CC",
|
||
padding: 10,
|
||
borderWidth: 1,
|
||
margin: 2,
|
||
alignItems: "center",
|
||
}}
|
||
onPress={() => Linking.openURL("https://www.jr-odekake.net/smt/")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
時刻・運賃計算
|
||
</Text>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
||
(マイ・ダイヤ)
|
||
</Text>
|
||
<Foundation name="yen" color="white" size={50} />
|
||
<Text style={{ color: "white" }}>
|
||
マイ・ダイヤはJR西日本提供のサービスです。
|
||
</Text>
|
||
</TouchableOpacity>
|
||
<TouchableOpacity
|
||
style={{
|
||
flex: 1,
|
||
backgroundColor: "#8AE234",
|
||
borderColor: "#0099CC",
|
||
padding: 10,
|
||
borderWidth: 1,
|
||
margin: 2,
|
||
alignItems: "center",
|
||
}}
|
||
onPress={() => Linking.openURL("tel:0570-00-4592")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
JR四国案内センター
|
||
</Text>
|
||
<Foundation name="telephone" color="white" size={50} />
|
||
<Text style={{ color: "white" }}>0570-00-4592</Text>
|
||
<Text style={{ color: "white" }}>(8:00~20:00 年中無休)</Text>
|
||
<Text style={{ color: "white" }}>(通話料がかかります)</Text>
|
||
</TouchableOpacity>
|
||
</View>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderRadius: 10,
|
||
margin: 10,
|
||
borderColor: "black",
|
||
borderWidth: 2,
|
||
}}
|
||
>
|
||
<View
|
||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||
>
|
||
<MaterialCommunityIcons
|
||
name="twitter"
|
||
style={{ padding: 5 }}
|
||
color="white"
|
||
size={30}
|
||
/>
|
||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||
公式Twitter一族
|
||
</Text>
|
||
</View>
|
||
<View
|
||
style={{
|
||
padding: 10,
|
||
backgroundColor: "white",
|
||
borderBottomLeftRadius: 10,
|
||
borderBottomRightRadius: 10,
|
||
}}
|
||
>
|
||
<ListItem
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/JRshikoku_tokyo")
|
||
}
|
||
>
|
||
<Text>JR四国 東京営業情報【公式】</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/JRshikoku_osaka")
|
||
}
|
||
>
|
||
<Text>JR四国 大阪営業部【公式】</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() => Linking.openURL("https://twitter.com/shikoku_DC")}
|
||
>
|
||
<Text>JR四国営業部 四国DC情報【公式】</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/jr_shikoku_info")
|
||
}
|
||
>
|
||
<Text>JR四国運行情報Twitter</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/Smile_Eki_Chan")
|
||
}
|
||
>
|
||
<Text>JR四国いそうろう妖精 すまいるえきちゃん♡【公式】</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/JR_Shikoku_DPT")
|
||
}
|
||
>
|
||
<Text>JR四国デザインPT♡</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
<ListItem
|
||
onPress={() => Linking.openURL("https://twitter.com/PT2nd_Yuki")}
|
||
>
|
||
<Text>JR四国デザインPT弐号◇</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Icon name="chevron-right" size={20} />
|
||
</ListItem>
|
||
</View>
|
||
</View>
|
||
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
|
||
このアプリについて
|
||
</Text>
|
||
<Text>
|
||
このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
|
||
</Text>
|
||
<Text>2022/4/14 4.1公開！列車アイコン表示が開始しました。</Text>
|
||
<Text>2021/6/23 4.0公開！ホーム画面を大改造しました。</Text>
|
||
<TextBox
|
||
backgroundColor="#CC0000"
|
||
flex={1}
|
||
onPressButton={() =>
|
||
Linking.openURL("https://twitter.com/Xprocess_main")
|
||
}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
XprocessのTwitter
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
制作運営のTwitterです。
|
||
</Text>
|
||
</TextBox>
|
||
<TextBox
|
||
backgroundColor="black"
|
||
flex={1}
|
||
onPressButton={() => navigate("setting")}
|
||
>
|
||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||
アプリの設定
|
||
</Text>
|
||
<Text style={{ color: "white", fontSize: 18 }}>
|
||
アプリの設定画面を表示します。
|
||
</Text>
|
||
</TextBox>
|
||
{/*
|
||
<SvgUri
|
||
width="200"
|
||
height="200"
|
||
source={require("./assets/トレインビジョン関係/1.svg")}
|
||
/> */}
|
||
</ScrollView>
|
||
<StationDeteilView
|
||
StationBoardAcSR={StationBoardAcSR}
|
||
currentStation={currentStation}
|
||
originalStationList={originalStationList}
|
||
/>
|
||
<ActionSheet
|
||
ref={JRSTraInfoEXAcSR}
|
||
gestureEnabled
|
||
CustomHeaderComponent={() => {}}
|
||
>
|
||
<View
|
||
style={{
|
||
backgroundColor: "#0099CC",
|
||
borderRadius: 5,
|
||
borderColor: "dark",
|
||
borderWidth: 1,
|
||
}}
|
||
>
|
||
<View style={{ height: 26, width: "100%" }}>
|
||
<View
|
||
style={{
|
||
height: 6,
|
||
width: 45,
|
||
borderRadius: 100,
|
||
backgroundColor: "#f0f0f0",
|
||
marginVertical: 10,
|
||
alignSelf: "center",
|
||
}}
|
||
/>
|
||
</View>
|
||
<View
|
||
style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
|
||
>
|
||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||
列車遅延速報EX
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
{/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
|
||
<Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
|
||
</TouchableOpacity> */}
|
||
<Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
|
||
{getTime
|
||
? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
|
||
":" +
|
||
getTime.toLocaleTimeString("ja-JP").split(":")[1]
|
||
: NaN}{" "}
|
||
</Text>
|
||
<Ionicons
|
||
name="reload"
|
||
color="white"
|
||
size={30}
|
||
style={{ margin: 5 }}
|
||
onPress={() => {
|
||
LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
|
||
}}
|
||
/>
|
||
</View>
|
||
<ScrollView>
|
||
<View
|
||
style={{
|
||
padding: 10,
|
||
backgroundColor: "white",
|
||
borderBottomLeftRadius: 5,
|
||
borderBottomRightRadius: 5,
|
||
}}
|
||
>
|
||
{loadingDelayData ? (
|
||
<View style={{ alignItems: "center" }}>
|
||
<LottieView
|
||
ref={LottieRef2}
|
||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||
source={require("./assets/51690-loading-diamonds.json")}
|
||
/>
|
||
</View>
|
||
) : delayData ? (
|
||
delayData.map((d) => {
|
||
let data = d.split(" ");
|
||
return (
|
||
<View style={{ flexDirection: "row" }}>
|
||
<Text style={{ flex: 15, fontSize: 20 }}>
|
||
{data[0].replace("\n", "")}
|
||
</Text>
|
||
<Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
|
||
<Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
|
||
</View>
|
||
);
|
||
})
|
||
) : (
|
||
<Text>現在、5分以上の遅れはありません。</Text>
|
||
)}
|
||
</View>
|
||
|
||
<View style={{ padding: 10 }}>
|
||
<Text
|
||
style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
|
||
>
|
||
列車遅延情報EXについて
|
||
</Text>
|
||
<Text style={{ color: "white" }}>
|
||
列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
|
||
</Text>
|
||
</View>
|
||
<TouchableOpacity
|
||
style={{
|
||
padding: 10,
|
||
flexDirection: "row",
|
||
borderColor: "white",
|
||
borderWidth: 1,
|
||
margin: 10,
|
||
borderRadius: 5,
|
||
alignItems: "center",
|
||
}}
|
||
onPress={() =>
|
||
Linking.openURL("https://twitter.com/JRSTrainfoEX")
|
||
}
|
||
>
|
||
<MaterialCommunityIcons name="twitter" color="white" size={30} />
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
|
||
>
|
||
TwitterBOTはこちら！
|
||
</Text>
|
||
<View style={{ flex: 1 }} />
|
||
<Text
|
||
style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
|
||
>
|
||
→
|
||
</Text>
|
||
</TouchableOpacity>
|
||
</ScrollView>
|
||
</View>
|
||
</ActionSheet>
|
||
</View>
|
||
);
|
||
}
|