menu要素の分離
This commit is contained in:
harukin-expo-dev-env
parent
5dd7ec5f7d
commit
6842b2f724
314
components/Menu/FixedContentBottom.js
Normal file
314
components/Menu/FixedContentBottom.js
Normal 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
19
components/Menu/TitleBar.js
Normal 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
370
menu.js
@ -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")}
|
||||
/> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
57
ndView.js
57
ndView.js
@ -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,53 +26,35 @@ 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,
|
||||
width: 50,
|
||||
height: 50,
|
||||
backgroundColor: LoadError ? "red" : "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 50,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch,
|
||||
},
|
||||
text: {
|
||||
textAlign: "center",
|
||||
width: "auto",
|
||||
height: "auto",
|
||||
textAlignVertical: "center",
|
||||
fontWeight: "bold",
|
||||
color: "white",
|
||||
},
|
||||
position: "absolute",
|
||||
top,
|
||||
right: 10,
|
||||
width: 50,
|
||||
height: 50,
|
||||
backgroundColor: LoadError ? "red" : "#0099CC",
|
||||
borderColor: "white",
|
||||
borderStyle: "solid",
|
||||
borderWidth: 1,
|
||||
borderRadius: 50,
|
||||
alignContent: "center",
|
||||
alignSelf: "center",
|
||||
alignItems: "center",
|
||||
display: mapSwitch,
|
||||
};
|
||||
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 }} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user