harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

menu要素の分離

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-03-19 11:55:31 +00:00
parent 5dd7ec5f7d
commit 6842b2f724
4 changed files with 360 additions and 400 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

314
components/Menu/FixedContentBottom.js Normal file
View File

@ -0,0 +1,314 @@
import { Linking, Text, View, TouchableOpacity } from "react-native";
import {
Foundation,
FontAwesome,
Ionicons,
MaterialCommunityIcons,
} from "@expo/vector-icons";
import Icon from "react-native-vector-icons/Entypo";
import { TextBox } from "../atom/TextBox";
import { TicketBox } from "../atom/TicketBox";
import { ListItem } from "native-base";
export const FixedContentBottom = (props) => {
return (
<>
{props.children}
<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-eki.com/smart-eki/index.html")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
スマートえきちゃん
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国のチケットレススマホアプリです。
</Text>
</TextBox>
<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" }}>
JR四国公式Twitter一族
</Text>
</View>
<View
style={{
padding: 10,
backgroundColor: "white",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
{[
{
url: "https://twitter.com/jr_shikoku_info",
name: "ＪＲ四国列車運行情報",
},
{
url: "https://twitter.com/JRshikoku_eigyo",
name: "JR四国営業部【公式】",
},
{
url: "https://twitter.com/JRshikoku_tokyo",
name: "JR四国 東京営業情報【公式】",
},
{
url: "https://twitter.com/JRshikoku_osaka",
name: "JR四国 大阪営業部【公式】",
},
{
url: "https://twitter.com/jrs_matsuyama",
name: "JR四国 松山駅 【公式】",
},
{
url: "https://twitter.com/jrshikoku_kochi",
name: "JR四国 高知駅【公式】",
},
{
url: "https://twitter.com/jr_tokust",
name: "JR四国 徳島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_uwjm",
name: "JR四国 宇和島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_wkama",
name: "JR四国 ワープ高松支店【公式】",
},
{
url: "https://twitter.com/JRshikoku_wkoch",
name: "JR四国 ワープ高知支店【公式】",
},
{
url: "https://twitter.com/Yoakemonogatari",
name: "志国土佐　時代の夜明けのものがたり【公式】",
},
{
url: "https://twitter.com/Smile_Eki_Chan",
name: "すまいるえきちゃん♡JR四国【公式】",
},
{
url: "https://twitter.com/sper_ponchan",
name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
},
].map((d) => (
<ListItem onPress={() => Linking.openURL(d.url)}>
<Text>{d.name}</Text>
<View style={{ flex: 1 }} />
<Icon name="chevron-right" size={20} />
</ListItem>
))}
</View>
</View>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
<TextBox
backgroundColor="#8c00d6"
flex={1}
onPressButton={() => props.navigate("AllTrainIDList")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
列番探索
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
データベースに存在する全列車のダイヤを探索
</Text>
</TextBox>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
このアプリについて
</Text>
<Text>
このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
</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={() => props.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")}
/> */}
</>
);
};

19
components/Menu/TitleBar.js Normal file
View File

@ -0,0 +1,19 @@
import { View, TouchableOpacity, Linking } from "react-native";
import AutoHeightImage from "react-native-auto-height-image";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
export const TitleBar = () => {
return (
<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>
);
};

370
menu.js
View File

@ -1,4 +1,4 @@
import React, { useRef, useState, useEffect, useLayoutEffect } from "react";
import React, { useRef, useState, useEffect } from "react";
import Carousel from "react-native-snap-carousel";
import {
Platform,
@ -9,28 +9,20 @@ import {
TouchableOpacity,
} from "react-native";
import Constants from "expo-constants";
import { ListItem } from "native-base";
import Icon from "react-native-vector-icons/Entypo";
import * as Location from "expo-location";
import StatusbarDetect from "./StatusbarDetect";
import AutoHeightImage from "react-native-auto-height-image";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import {
FontAwesome,
Foundation,
Ionicons,
MaterialCommunityIcons,
} from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";
import LottieView from "lottie-react-native";
import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
import trainList from "./assets/originData/trainList";
import LED_vision from "./components/発車時刻表/LED_vidion";
import Sign from "./components/駅名表/Sign";
import { TitleBar } from "./components/Menu/TitleBar";
import { FixedContentBottom } from "./components/Menu/FixedContentBottom";
import { UsefulBox } from "./components/atom/UsefulBox";
import { TicketBox } from "./components/atom/TicketBox";
import { TextBox } from "./components/atom/TextBox";
import { getStationList, lineList } from "./lib/getStationList";
import useInterval from "./lib/useInterval";
import { HeaderConfig } from "./lib/HeaderConfig";
@ -146,30 +138,6 @@ export default function Menu({ getCurrentTrain }) {
setTrainDiagram(trainList);
});
}, []);
const openStationACFromEachTrainInfo = () => {
// EachTrainInfoAsSR.current?.hide();
// const findStationEachLine = (selectLine) => {
// let NearStation = selectLine.filter((d) => d.Station_JP == stationName);
// return NearStation;
// };
// let returnDataBase = lineList
// .map((d) => findStationEachLine(originalStationList[d]))
// .filter((d) => d.length > 0)
// .reduce((pre, current) => {
// pre.push(...current);
// return pre;
// }, []);
// if (returnDataBase.length) {
// setStationBoardData(returnDataBase);
// sleep(30, function () {
// StationBoardAcSR.current?.show();
// });
// } else {
// setStationBoardData(undefined);
// StationBoardAcSR.current?.hide();
// }
};
return (
<View
style={{
@ -181,7 +149,7 @@ export default function Menu({ getCurrentTrain }) {
<StatusbarDetect />
<TitleBar />
<ScrollView>
<FixedContentTop navigate={navigate} />
<TopMenuButton />
{originalStationList.length != 0 && allStationData.length != 0 && (
<Carousel
ref={carouselRef}
@ -242,7 +210,7 @@ export default function Menu({ getCurrentTrain }) {
getCurrentTrain={getCurrentTrain}
navigate={navigate}
originalStationList={originalStationList}
openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
openStationACFromEachTrainInfo={() => {}}
/>
)}
<JRSTraInfoBox />
@ -252,22 +220,6 @@ export default function Menu({ getCurrentTrain }) {
);
}
const TitleBar = () => {
return (
<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>
);
};
const TopMenuButton = () => {
const buttonList = [
{
@ -416,313 +368,3 @@ const JRSTraInfoBox = () => {
</TouchableOpacity>
);
};
const FixedContentTop = () => {
return (
<>
<TopMenuButton />
</>
);
};
const FixedContentBottom = (props) => {
return (
<>
{props.children}
<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-eki.com/smart-eki/index.html")
}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
スマートえきちゃん
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
JR四国のチケットレススマホアプリです。
</Text>
</TextBox>
<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" }}>
JR四国公式Twitter一族
</Text>
</View>
<View
style={{
padding: 10,
backgroundColor: "white",
borderBottomLeftRadius: 10,
borderBottomRightRadius: 10,
}}
>
{[
{
url: "https://twitter.com/jr_shikoku_info",
name: "ＪＲ四国列車運行情報",
},
{
url: "https://twitter.com/JRshikoku_eigyo",
name: "JR四国営業部【公式】",
},
{
url: "https://twitter.com/JRshikoku_tokyo",
name: "JR四国 東京営業情報【公式】",
},
{
url: "https://twitter.com/JRshikoku_osaka",
name: "JR四国 大阪営業部【公式】",
},
{
url: "https://twitter.com/jrs_matsuyama",
name: "JR四国 松山駅 【公式】",
},
{
url: "https://twitter.com/jrshikoku_kochi",
name: "JR四国 高知駅【公式】",
},
{
url: "https://twitter.com/jr_tokust",
name: "JR四国 徳島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_uwjm",
name: "JR四国 宇和島駅【公式】",
},
{
url: "https://twitter.com/jrshikoku_wkama",
name: "JR四国 ワープ高松支店【公式】",
},
{
url: "https://twitter.com/JRshikoku_wkoch",
name: "JR四国 ワープ高知支店【公式】",
},
{
url: "https://twitter.com/Yoakemonogatari",
name: "志国土佐　時代の夜明けのものがたり【公式】",
},
{
url: "https://twitter.com/Smile_Eki_Chan",
name: "すまいるえきちゃん♡JR四国【公式】",
},
{
url: "https://twitter.com/sper_ponchan",
name: "しこくたぬきのぽんちゃん　【四国家サポーターズクラブ】",
},
].map((d) => (
<ListItem onPress={() => Linking.openURL(d.url)}>
<Text>{d.name}</Text>
<View style={{ flex: 1 }} />
<Icon name="chevron-right" size={20} />
</ListItem>
))}
</View>
</View>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>上級者向け機能</Text>
<TextBox
backgroundColor="#8c00d6"
flex={1}
onPressButton={() => props.navigate("AllTrainIDList")}
>
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
列番探索
</Text>
<Text style={{ color: "white", fontSize: 18 }}>
データベースに存在する全列車のダイヤを探索
</Text>
</TextBox>
<Text style={{ fontWeight: "bold", fontSize: 20 }}>
このアプリについて
</Text>
<Text>
このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
</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={() => props.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")}
/> */}
</>
);
};

29
ndView.js
View File

@ -5,7 +5,10 @@ import Constants from "expo-constants";
import { Ionicons } from "@expo/vector-icons";
export default function tndView() {
const webview = useRef();
const [LoadError, setLoadError] = useState(false);
const jsa = `
document.querySelector('.sitettl').style.display = 'none';
document.querySelector('.attention').style.display = 'none';
`;
return (
<View
style={{
@ -23,27 +26,18 @@ export default function tndView() {
javaScriptEnabled={true}
injectedJavaScript={jsa}
pullToRefreshEnabled
onError={(syntheticEvent) => {
//webViewの再読み込みを行う
this.webView.reload();
}}
onError={() => this.webView?.reload()}
/>
<ReloadButton
onPress={() => webview.current.reload()}
onPress={() => webview.current?.reload()}
top={Platform.OS == "ios" ? Constants.statusBarHeight : 0}
LoadError={LoadError}
/>
</View>
);
}
const jsa = `
document.querySelector('.sitettl').style.display = 'none';
document.querySelector('.attention').style.display = 'none';
`;
const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
const styles = {
touch: {
position: "absolute",
top,
right: 10,
@ -58,18 +52,9 @@ const ReloadButton = ({ onPress, top, mapSwitch, LoadError = false }) => {
alignSelf: "center",
alignItems: "center",
display: mapSwitch,
},
text: {
textAlign: "center",
width: "auto",
height: "auto",
textAlignVertical: "center",
fontWeight: "bold",
color: "white",
},
};
return (
<TouchableOpacity onPress={onPress} style={styles.touch}>
<TouchableOpacity onPress={onPress} style={styles}>
<View style={{ flex: 1 }} />
<Ionicons name="reload" color="white" size={30} />
<View style={{ flex: 1 }} />