リファクタリング
This commit is contained in:
harukin-DeskMini
parent
8d5ad6e50e
commit
48a8dba1c0
60
App.js
60
App.js
@ -14,7 +14,6 @@ import trainbase from "./trainbaseview";
|
||||
import howto from "./howto";
|
||||
import menu from "./menu";
|
||||
import News from "./components/news.js";
|
||||
import TestArea from "./TestArea.js";
|
||||
import Setting from "./components/settings.js";
|
||||
import trainMenu from "./components/trainMenu.js";
|
||||
const Stack = createStackNavigator();
|
||||
@ -26,7 +25,6 @@ if (Platform.OS === "android") {
|
||||
}
|
||||
export default function App() {
|
||||
const navigationRef = useRef();
|
||||
var platform = Platform.OS === "android" ? 70 : 50;
|
||||
useEffect(() => UpdateAsync(), []);
|
||||
return (
|
||||
<NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
|
||||
@ -38,9 +36,7 @@ export default function App() {
|
||||
tabBarLabel: "位置情報",
|
||||
headerTransparent: true,
|
||||
gestureEnabled: true,
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<AntDesign name="barchart" size={32} />
|
||||
),
|
||||
tabBarIcon: () => <AntDesign name="barchart" size={32} />,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
@ -50,9 +46,7 @@ export default function App() {
|
||||
tabBarLabel: "リンク",
|
||||
headerTransparent: true,
|
||||
gestureEnabled: true,
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="ios-radio" size={32} />
|
||||
),
|
||||
tabBarIcon: () => <Ionicons name="ios-radio" size={32} />,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
@ -62,9 +56,7 @@ export default function App() {
|
||||
tabBarLabel: "運行情報",
|
||||
headerTransparent: true,
|
||||
gestureEnabled: true,
|
||||
tabBarIcon: ({ color, size }) => (
|
||||
<Ionicons name="md-train" size={32} />
|
||||
),
|
||||
tabBarIcon: () => <Ionicons name="md-train" size={32} />,
|
||||
}}
|
||||
/>
|
||||
</Tab.Navigator>
|
||||
@ -97,35 +89,14 @@ function top() {
|
||||
component={howto}
|
||||
options={{
|
||||
title: "使い方",
|
||||
gestureEnabled: true,
|
||||
...TransitionPresets.ModalPresentationIOS,
|
||||
cardOverlayEnabled: true,
|
||||
headerTransparent: true,
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen name="test" component={TestArea} options={{}} />
|
||||
<Stack.Screen
|
||||
name="news"
|
||||
component={News}
|
||||
options={{
|
||||
gestureEnabled: true,
|
||||
...TransitionPresets.ModalPresentationIOS,
|
||||
cardOverlayEnabled: true,
|
||||
headerTransparent: true,
|
||||
headerShown: false,
|
||||
...optionData,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen name="news" component={News} options={optionData} />
|
||||
<Stack.Screen
|
||||
name="trainMenu"
|
||||
component={trainMenu}
|
||||
options={{
|
||||
gestureEnabled: true,
|
||||
...TransitionPresets.ModalPresentationIOS,
|
||||
cardOverlayEnabled: true,
|
||||
headerTransparent: true,
|
||||
headerShown: false,
|
||||
}}
|
||||
options={optionData}
|
||||
/>
|
||||
</Stack.Navigator>
|
||||
);
|
||||
@ -142,17 +113,14 @@ function menuPage() {
|
||||
headerTransparent: true,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen
|
||||
name="setting"
|
||||
component={Setting}
|
||||
options={{
|
||||
gestureEnabled: true,
|
||||
...TransitionPresets.ModalPresentationIOS,
|
||||
cardOverlayEnabled: true,
|
||||
headerTransparent: true,
|
||||
headerShown: false,
|
||||
}}
|
||||
/>
|
||||
<Stack.Screen name="setting" component={Setting} options={optionData} />
|
||||
</Stack.Navigator>
|
||||
);
|
||||
}
|
||||
const optionData = {
|
||||
gestureEnabled: true,
|
||||
...TransitionPresets.ModalPresentationIOS,
|
||||
cardOverlayEnabled: true,
|
||||
headerTransparent: true,
|
||||
headerShown: false,
|
||||
};
|
||||
|
||||
7
Apps.js
7
Apps.js
@ -201,11 +201,8 @@ export default function Apps(props) {
|
||||
injectedJavaScript={injectJavascript}
|
||||
/>
|
||||
<TouchableOpacity
|
||||
onPress={
|
||||
() => navigate("trainMenu", { webview, stationData: mapsStationData })
|
||||
/* {
|
||||
setSelectedStation("松山");
|
||||
} */
|
||||
onPress={() =>
|
||||
navigate("trainMenu", { webview, stationData: mapsStationData })
|
||||
}
|
||||
style={{
|
||||
position: "absolute",
|
||||
|
||||
72
TestArea.js
72
TestArea.js
@ -1,72 +0,0 @@
|
||||
import React, { Component, useEffect, useState } from "react";
|
||||
import { StatusBar, View, ScrollView, Linking, Text } from "react-native";
|
||||
import Constants from "expo-constants";
|
||||
import { ListItem } from "react-native-elements";
|
||||
import Icon from "react-native-vector-icons/Entypo";
|
||||
import StatusbarDetect from "./StatusbarDetect";
|
||||
var Status = StatusbarDetect();
|
||||
let a = [];
|
||||
export default function TestArea(props) {
|
||||
const [data, setdata] = useState(null);
|
||||
useEffect(() => {
|
||||
data == null
|
||||
? test().then((res) => {
|
||||
setdata(res);
|
||||
})
|
||||
: null;
|
||||
}, [data]);
|
||||
return (
|
||||
<View style={{ height: "100%", paddingTop: Constants.statusBarHeight }}>
|
||||
{Status}
|
||||
<ScrollView>
|
||||
<Text>TEST AREA!!</Text>
|
||||
{data}
|
||||
</ScrollView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
async function test() {
|
||||
return fetch("https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train", {
|
||||
headers: {
|
||||
authority: "train.jr-shikoku.co.jp",
|
||||
"cache-control": "no-cache",
|
||||
pragma: "no-cache",
|
||||
"if-modified-since": "Thu, 01 Jun 1970 00:00:00 GMT",
|
||||
accept: "*/*",
|
||||
"sec-fetch-site": "same-origin",
|
||||
"sec-fetch-mode": "cors",
|
||||
referer: "https://train.jr-shikoku.co.jp/sp.html",
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((D) => {
|
||||
let d = [];
|
||||
D.forEach((element) => {
|
||||
d.push(
|
||||
<ListItem
|
||||
title={
|
||||
"Direction:" +
|
||||
element.Direction +
|
||||
" Index:" +
|
||||
element.Index +
|
||||
" Line:" +
|
||||
element.Line +
|
||||
" Pos:" +
|
||||
element.Pos +
|
||||
" PosNum:" +
|
||||
element.PosNum +
|
||||
" TrainNum:" +
|
||||
element.TrainNum +
|
||||
" Type:" +
|
||||
element.Type +
|
||||
" Delay:" +
|
||||
element.delay
|
||||
}
|
||||
/>
|
||||
);
|
||||
});
|
||||
a = d;
|
||||
return d;
|
||||
});
|
||||
}
|
||||
@ -58,252 +58,61 @@ export default function Sign(props) {
|
||||
}
|
||||
}, [currentStation]);
|
||||
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
|
||||
.filter((d) => (d.StationNumber != " " ? true : false))
|
||||
.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",
|
||||
}}
|
||||
>
|
||||
<TouchableOpacity style={styleSheet.外枠} onPress={oP}>
|
||||
<StationNumberMaker currentStation={currentStation} />
|
||||
<StationNameArea currentStation={currentStation} />
|
||||
<Text style={styleSheet.JRStyle}>JR</Text>
|
||||
<View style={styleSheet.下帯} />
|
||||
<View style={styleSheet.下帯内容}>
|
||||
{
|
||||
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>,
|
||||
preStation.StationNumber != " " && (
|
||||
<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={styleSheet.下枠フレーム}>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{preStation && (
|
||||
<>
|
||||
<Text style={styleSheet.下枠左右マーク}>◀</Text>
|
||||
{preStation.StationNumber != " " && (
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{
|
||||
fontSize: parseInt("10%"),
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
{preStation.StationNumber}
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
)}
|
||||
<StationName
|
||||
stringData={preStation}
|
||||
ss={{ flex: 1, alignItems: "flex-start" }}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
<View style={styleSheet.下枠フレーム}>
|
||||
{nexStation && (
|
||||
<>
|
||||
<StationName
|
||||
stringData={nexStation}
|
||||
ss={{ flex: 1, alignItems: "flex-end" }}
|
||||
/>
|
||||
<View style={styleSheet.下枠駅ナンバー}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text
|
||||
style={{ fontSize: parseInt("10%"), color: "white" }}
|
||||
>
|
||||
{preStation.StationNumber}
|
||||
{nexStation.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>,
|
||||
]}
|
||||
<Text style={styleSheet.下枠左右マーク}>▶</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
@ -313,3 +122,143 @@ export default function Sign(props) {
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
|
||||
const StationNumberMaker = (props) => {
|
||||
return props.currentStation
|
||||
.filter((d) => (d.StationNumber != " " ? true : false))
|
||||
.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>
|
||||
));
|
||||
};
|
||||
|
||||
const StationNameArea = (props) => {
|
||||
const { currentStation } = props;
|
||||
return (
|
||||
<View style={styleSheet.stationNameAreaOverWrap}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<View style={{ alignItems: "center" }}>
|
||||
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
|
||||
<Text style={styleSheet.Station_JP}>
|
||||
{currentStation[0].Station_JP}
|
||||
</Text>
|
||||
<Text style={styleSheet.Station_EN}>
|
||||
{currentStation[0].Station_EN}
|
||||
</Text>
|
||||
</View>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const StationName = (props) => {
|
||||
const { stringData, ss } = props;
|
||||
return (
|
||||
<View style={ss}>
|
||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
|
||||
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const styleSheet = {
|
||||
外枠: {
|
||||
width: wp("80%"),
|
||||
height: (wp("80%") / 20) * 9,
|
||||
borderColor: "#2E94BB",
|
||||
borderWidth: 1,
|
||||
margin: 10,
|
||||
marginHorizontal: wp("10%"),
|
||||
},
|
||||
下帯: {
|
||||
position: "absolute",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
width: "100%",
|
||||
height: "30%",
|
||||
backgroundColor: "#2E94BB",
|
||||
},
|
||||
JRStyle: {
|
||||
position: "absolute",
|
||||
top: "2%",
|
||||
left: "2%",
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("30%"),
|
||||
color: "#2E94BB",
|
||||
},
|
||||
stationNameAreaOverWrap: {
|
||||
position: "absolute",
|
||||
top: "10%",
|
||||
alignContent: "center",
|
||||
flexDirection: "row",
|
||||
},
|
||||
Station_JP: {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("40%"),
|
||||
color: "#005170",
|
||||
},
|
||||
Station_EN: {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("15%"),
|
||||
color: "#005170",
|
||||
},
|
||||
下帯内容: {
|
||||
position: "absolute",
|
||||
bottom: "0%",
|
||||
height: "30%",
|
||||
width: "100%",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
},
|
||||
下枠フレーム: {
|
||||
flex: 1,
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
},
|
||||
下枠左右マーク: {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("20%"),
|
||||
color: "white",
|
||||
paddingHorizontal: 10,
|
||||
textAlignVertical: "center",
|
||||
},
|
||||
下枠駅ナンバー: {
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
width: wp("8%"),
|
||||
height: wp("8%"),
|
||||
margin: wp("1%"),
|
||||
borderColor: "white",
|
||||
borderWidth: parseInt("2%"),
|
||||
borderRadius: parseInt("100%"),
|
||||
},
|
||||
下枠駅名: {
|
||||
fontWeight: "bold",
|
||||
fontSize: parseInt("15%"),
|
||||
color: "white",
|
||||
flex: 1,
|
||||
textAlignVertical: "center",
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user