441 lines
27 KiB
JavaScript
441 lines
27 KiB
JavaScript
import React, { Component, useRef, useState, useEffect } from 'react';
|
||
import {StatusBar,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 予讃線 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';
|
||
|
||
|
||
|
||
const UsefulBox = (props) =>{
|
||
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
||
return(
|
||
<TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,alignItems:"center",margin:2}} onPress={onPressButton}>
|
||
<MaterialCommunityIcons name={icon} color="white" size={50}/>
|
||
<Text style={{color:"white",fontWeight:"bold",fontSize:20}}>{children}</Text>
|
||
</TouchableOpacity>
|
||
)
|
||
}
|
||
const TicketBox = (props) =>{
|
||
const { icon, backgroundColor, flex, onPressButton, children } = props;
|
||
return(
|
||
<TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,borderColor:"#0099CC",padding:10,borderWidth:1,margin:2,alignItems:"center"}} onPress={onPressButton}>
|
||
<Text style={{color:"white",fontWeight:"bold",fontSize:20}}>{children}</Text>
|
||
{icon}
|
||
</TouchableOpacity>
|
||
)
|
||
}
|
||
|
||
const TextBox = (props) =>{
|
||
const { backgroundColor, flex, onPressButton, children } = props;
|
||
return(
|
||
<TouchableOpacity style={{flex:flex,backgroundColor:backgroundColor,padding:10,height:70,alignItems:"center",alignContent:"center",margin:2}} onPress={onPressButton}>
|
||
<View style={{flex:1}} />
|
||
{children}
|
||
<View style={{flex:1}} />
|
||
</TouchableOpacity>
|
||
)
|
||
}
|
||
|
||
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(()=>{ //駅リストイニシャライズ
|
||
const HeaderConfig = {
|
||
headers:{
|
||
'referer':'https://train.jr-shikoku.co.jp/sp.html'
|
||
}
|
||
}
|
||
Promise.all([
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=yosan', HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=uwajima2',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=dosan2',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=koutoku',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=tokushima',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=naruto',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=station&arg2=between',HeaderConfig).then(response => response.json()),
|
||
fetch('https://train.jr-shikoku.co.jp/g?arg1=line&arg2=train_lang',HeaderConfig).then(response => response.json())
|
||
]).then(values =>{
|
||
let stationList = {};
|
||
[stationList.予讃線, stationList.松宇線, stationList.伊予灘線, stationList.土讃線, stationList.窪川線, stationList.高徳線, stationList.徳島線, stationList.鳴門線, stationList.駅間リスト,stationList.日英対応表] = values;
|
||
|
||
const concatBetweenStations = (eachRouteData) => {
|
||
let additional = [];
|
||
eachRouteData.forEach((routeData,routeIndex) => {
|
||
try{
|
||
const currentStationID = parseInt(routeData.StationNumber.replace(/[A-Z]/g,""))
|
||
const nextStationID = parseInt(eachRouteData[routeIndex+1].StationNumber.replace(/[A-Z]/g,""))
|
||
if((nextStationID-currentStationID) != 1){
|
||
stationList.駅間リスト.forEach(betweenList=>{
|
||
if(betweenList.BetweenStation == (routeData.Station_JP+"～"+eachRouteData[routeIndex+1].Station_JP)){
|
||
additional = additional.concat(betweenList.Datas);
|
||
}
|
||
})
|
||
}
|
||
}catch(e){}
|
||
});
|
||
return(eachRouteData.concat(additional).sort((a,b)=> (a.StationNumber > b.StationNumber) ? 1 : -1 ))
|
||
}
|
||
const addStationPosition = (setDataBase, geoJson, EnJpList) =>{
|
||
return setDataBase.map((data)=>{
|
||
let stationName;
|
||
if(data.hasOwnProperty("Station_JP")) stationName = data.Station_JP;
|
||
else if(data.hasOwnProperty("StationName")){
|
||
stationName = data.StationName;
|
||
data.Station_JP = data.StationName;
|
||
data.Station_EN = EnJpList.find(d=>d.Station_JP == data.Station_JP).Station_EN
|
||
}
|
||
geoJson.features.filter(d=>d.geometry.type == "Point").forEach(element =>{
|
||
if(element.properties.name == stationName){
|
||
data.lat = element.geometry.coordinates[1];
|
||
data.lng = element.geometry.coordinates[0];
|
||
}
|
||
});
|
||
return data;
|
||
})
|
||
}
|
||
stationList.予讃線 = addStationPosition(concatBetweenStations(stationList.予讃線), 予讃線, stationList.日英対応表);
|
||
stationList.松宇線 = addStationPosition(concatBetweenStations(stationList.松宇線), 予讃線, stationList.日英対応表);
|
||
stationList.伊予灘線 = addStationPosition(concatBetweenStations(stationList.伊予灘線), 予讃線, stationList.日英対応表);
|
||
stationList.土讃線 = addStationPosition(concatBetweenStations(stationList.土讃線), 土讃線, stationList.日英対応表);
|
||
stationList.窪川線 = addStationPosition(concatBetweenStations(stationList.窪川線), 土讃線, stationList.日英対応表);
|
||
stationList.高徳線 = addStationPosition(concatBetweenStations(stationList.高徳線), 高徳線, stationList.日英対応表);
|
||
stationList.徳島線 = addStationPosition(concatBetweenStations(stationList.徳島線), 徳島線, stationList.日英対応表);
|
||
stationList.鳴門線 = addStationPosition(concatBetweenStations(stationList.鳴門線), 鳴門線, 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%",paddingTop: Constants.statusBarHeight,backgroundColor:"white"}}>
|
||
{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:20}}>新型コロナウイルスに関するお知らせ</Text>
|
||
<Text style={{color:"white",fontSize:18}}>列車の運行計画・混雑状況・感染症対策への取り組み</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>
|
||
<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>
|
||
<ActionSheet ref={StationBoardAcSR}gestureEnabled CustomHeaderComponent={()=>{}}>
|
||
<View style={{backgroundColor:"white",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>
|
||
<ScrollView>{currentStation &&
|
||
<Sign currentStation={currentStation} originalStationList={originalStationList} oP={()=> Linking.openURL(currentStation[0].StationTimeTable)} />}
|
||
{currentStation &&
|
||
<View style={{flexDirection:"row"}}>
|
||
{!currentStation[0].JrHpUrl ||<TicketBox backgroundColor={"#AD7FA8"} icon={<Foundation name="web" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].JrHpUrl)}>web</TicketBox>}
|
||
{!currentStation[0].StationTimeTable || <TicketBox backgroundColor={"#8F5902"} icon={<FontAwesome name="table" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].StationTimeTable)}>時刻表</TicketBox>}
|
||
{!currentStation[0].StationMap || <TicketBox backgroundColor={"#888A85"} icon={<Ionicons name="map" color="white" size={50}/>} flex={1} onPressButton={()=> Linking.openURL(currentStation[0].StationMap)}>GoogleMap</TicketBox>}
|
||
</View>
|
||
}
|
||
|
||
</ScrollView>
|
||
</View>
|
||
|
||
</ActionSheet>
|
||
</View>
|
||
);
|
||
}
|