88 lines
5.6 KiB
JavaScript
88 lines
5.6 KiB
JavaScript
import React, { Component, useRef, useState, useEffect } from 'react';
|
|
import {StatusBar,View,LayoutAnimation,ScrollView,Linking,Text,TouchableOpacity } from 'react-native';
|
|
import {widthPercentageToDP as wp, heightPercentageToDP as hp} from 'react-native-responsive-screen';
|
|
|
|
|
|
export default function Sign(props){
|
|
const {currentStation, originalStationList, oP} = props;
|
|
const getPreNextStation = (now) =>{
|
|
const lineList = ["予讃線", "松宇線", "伊予灘線", "土讃線", "窪川線", "高徳線", "徳島線", "鳴門線"];
|
|
let returnData;
|
|
lineList.forEach(d=>{
|
|
let cache = originalStationList[d].findIndex( data => data.StationNumber == now.StationNumber);
|
|
if(cache != -1){
|
|
returnData = [originalStationList[d][cache-1],originalStationList[d][cache+1]]
|
|
}
|
|
|
|
})
|
|
return returnData;
|
|
}
|
|
return(
|
|
<TouchableOpacity style={{ width: wp("80%"), height: wp("80%")/20*9,borderColor:"#2E94BB",borderWidth:1,margin:10,marginHorizontal:wp("10%")}} /* onPress={()=> !stationName.今.JrHpUrl || Linking.openURL(stationName.今.JrHpUrl)} */onPress={oP}>
|
|
<View style={{position:"absolute",bottom:"0%",left:"0%",width:"100%",height:'30%',backgroundColor:"#2E94BB"}} />
|
|
<Text style={{position:"absolute",top:"2%",left:"2%",fontWeight:"bold",fontSize:parseInt("30%"),color:"#2E94BB"}}>JR</Text>
|
|
{currentStation.map((d,index,array)=>
|
|
<View style={{position:"absolute",alignContent:"center",alignItems:"center",top:(()=>{
|
|
if(array.length == 1) return 20;
|
|
else if(index == 0) return 5;
|
|
else if(index == 1) return 35;
|
|
else return 20;
|
|
})()+"%",right:'10%',width:wp("10%"),height:wp("10%"),borderColor:"#2E94BB",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
|
|
<View style={{flex:1}} />
|
|
<Text style={{fontSize:parseInt("20%")}}>{d.StationNumber}</Text>
|
|
<View style={{flex:1}} />
|
|
</View>
|
|
)}
|
|
<View style={{position:"absolute",top:"10%",alignContent:"center",flexDirection:"row"}}>
|
|
<View style={{flex:1}}/>
|
|
<View style={{alignItems:"center"}}>
|
|
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("40%"),color:"#005170"}}>{currentStation[0].Station_JP}</Text>
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{currentStation[0].Station_EN}</Text>
|
|
</View>
|
|
<View style={{flex:1}}/>
|
|
</View>
|
|
<View style={{position:"absolute",bottom:"0%",height:"30%",width:"100%",alignItems:"center",flexDirection:"column"}}>
|
|
|
|
{(()=>{return currentStation.map(currentStation =>{
|
|
let [preStation, nexStation] = getPreNextStation(currentStation)
|
|
return(
|
|
<View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
|
|
<View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
|
|
{preStation &&
|
|
[<Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>◀</Text>,
|
|
<View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
|
|
<View style={{flex:1}} />
|
|
<Text style={{fontSize:parseInt("10%"),color:"white"}}>{preStation.StationNumber}</Text>
|
|
<View style={{flex:1}} />
|
|
</View>,
|
|
<View style={{flex:1,alignItems:"flex-start"}}>
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_JP}</Text>
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{preStation.Station_EN}</Text>
|
|
</View>]}
|
|
</View>
|
|
<View style={{flex:1,flexDirection:"row",alignContent:"center"}}>
|
|
|
|
{nexStation &&
|
|
[<View style={{flex:1,alignItems:"flex-end"}}>
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_JP}</Text>
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"white",flex:1,textAlignVertical:"center"}}>{nexStation.Station_EN}</Text>
|
|
</View>,
|
|
<View style={{alignContent:"center",alignItems:"center",width:wp("8%"),height:wp("8%"),margin:wp("1%"),borderColor:"white",borderWidth:parseInt("2%"),borderRadius:parseInt("100%")}} >
|
|
<View style={{flex:1}} />
|
|
<Text style={{fontSize:parseInt("10%"),color:"white"}}>{nexStation.StationNumber}</Text>
|
|
<View style={{flex:1}} />
|
|
</View>,
|
|
<Text style={{fontWeight:"bold",fontSize:parseInt("20%"),color:"white",paddingHorizontal:10,textAlignVertical:"center"}}>▶</Text>]}
|
|
</View>
|
|
</View>
|
|
)
|
|
})[0]
|
|
|
|
})()}
|
|
|
|
</View>
|
|
|
|
</TouchableOpacity>
|
|
)
|
|
} |