列車遅延速報EXを分離
This commit is contained in:
harukin-DeskMini
parent
dd78cdd3c7
commit
762195e8e8
167
components/ActionSheetComponents/JRSTraInfo.js
Normal file
167
components/ActionSheetComponents/JRSTraInfo.js
Normal file
@ -0,0 +1,167 @@
|
|||||||
|
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";
|
||||||
|
export const JRSTraInfo = (props) => {
|
||||||
|
const {
|
||||||
|
JRSTraInfoEXAcSR,
|
||||||
|
getTime,
|
||||||
|
loadingDelayData,
|
||||||
|
setLoadingDelayData,
|
||||||
|
delayData,
|
||||||
|
LottieRef2,
|
||||||
|
} = props;
|
||||||
|
return (
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
};
|
||||||
142
menu.js
142
menu.js
@ -48,6 +48,7 @@ import { UsefulBox } from "./components/atom/UsefulBox";
|
|||||||
import { TicketBox } from "./components/atom/TicketBox";
|
import { TicketBox } from "./components/atom/TicketBox";
|
||||||
import { TextBox } from "./components/atom/TextBox";
|
import { TextBox } from "./components/atom/TextBox";
|
||||||
import { getStationList } from "./lib/getStationList";
|
import { getStationList } from "./lib/getStationList";
|
||||||
|
import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
|
||||||
|
|
||||||
export default function Menu(props) {
|
export default function Menu(props) {
|
||||||
const {
|
const {
|
||||||
@ -136,11 +137,6 @@ export default function Menu(props) {
|
|||||||
}
|
}
|
||||||
}, [location, originalStationList]);
|
}, [location, originalStationList]);
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
console.log("test");
|
|
||||||
console.log(currentStation);
|
|
||||||
}, [currentStation]);
|
|
||||||
|
|
||||||
const LottieRef = useRef(null);
|
const LottieRef = useRef(null);
|
||||||
const LottieRef2 = useRef(null);
|
const LottieRef2 = useRef(null);
|
||||||
const [count, setCount] = useState(0);
|
const [count, setCount] = useState(0);
|
||||||
@ -636,134 +632,14 @@ export default function Menu(props) {
|
|||||||
currentStation={currentStation}
|
currentStation={currentStation}
|
||||||
originalStationList={originalStationList}
|
originalStationList={originalStationList}
|
||||||
/>
|
/>
|
||||||
<ActionSheet
|
<JRSTraInfo
|
||||||
ref={JRSTraInfoEXAcSR}
|
JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
|
||||||
gestureEnabled
|
getTime={getTime}
|
||||||
CustomHeaderComponent={() => {}}
|
loadingDelayData={loadingDelayData}
|
||||||
>
|
setLoadingDelayData={setLoadingDelayData}
|
||||||
<View
|
delayData={delayData}
|
||||||
style={{
|
LottieRef2={LottieRef2}
|
||||||
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>
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user