固定コンテンツの移動
This commit is contained in:
harukin-DeskMini
parent
d45b6aee0e
commit
28c58ce83f
424
menu.js
424
menu.js
@ -162,24 +162,11 @@ export default function Menu(props) {
|
||||
>
|
||||
<StatusbarDetect />
|
||||
<TitleBar />
|
||||
<ScrollView ref={scrollRef} scrollEnabled={isScroll}>
|
||||
<TopMenuButton />
|
||||
<TextBox
|
||||
backgroundColor="#0099CC"
|
||||
flex={1}
|
||||
onPressButton={() =>
|
||||
Linking.openURL(
|
||||
"https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
|
||||
)
|
||||
}
|
||||
<FixedContent
|
||||
scrollRef={scrollRef}
|
||||
isScroll={isScroll}
|
||||
navigate={navigate}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
|
||||
新型コロナウイルスに関するお知らせ
|
||||
</Text>
|
||||
<Text style={{ color: "white", fontSize: 15 }}>
|
||||
列車の運行計画・混雑状況・感染症対策への取り組み
|
||||
</Text>
|
||||
</TextBox>
|
||||
<Carousel
|
||||
ref={carouselRef}
|
||||
layout={"default"}
|
||||
@ -229,6 +216,217 @@ export default function Menu(props) {
|
||||
loadingDelayData={loadingDelayData}
|
||||
delayData={delayData}
|
||||
/>
|
||||
</FixedContent>
|
||||
<StationDeteilView
|
||||
StationBoardAcSR={StationBoardAcSR}
|
||||
currentStation={
|
||||
originalStationList &&
|
||||
(currentStation
|
||||
? [currentStation, ...locationAndFavorite]
|
||||
: locationAndFavorite)[selectedCurrentStation]
|
||||
}
|
||||
originalStationList={originalStationList}
|
||||
favoriteStation={favoriteStation}
|
||||
setFavoriteStation={setFavoriteStation}
|
||||
busAndTrainData={busAndTrainData}
|
||||
/>
|
||||
<JRSTraInfo
|
||||
JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
|
||||
getTime={getTime}
|
||||
loadingDelayData={loadingDelayData}
|
||||
setLoadingDelayData={setLoadingDelayData}
|
||||
delayData={delayData}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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 = [
|
||||
{
|
||||
backgroundColor: "#F89038",
|
||||
icon: "train-car",
|
||||
onPress: () =>
|
||||
Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
|
||||
title: "駅・鉄道情報",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#EA4752",
|
||||
icon: "google-spreadsheet",
|
||||
onPress: () =>
|
||||
Linking.openURL(
|
||||
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
||||
),
|
||||
title: "運賃表",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#91C31F",
|
||||
icon: "clipboard-list-outline",
|
||||
onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
|
||||
title: "予約",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
{buttonList.map((d, index) => (
|
||||
<UsefulBox
|
||||
backgroundColor={d.backgroundColor}
|
||||
icon={d.icon}
|
||||
flex={1}
|
||||
onPressButton={d.onPress}
|
||||
key={index + d.icon}
|
||||
>
|
||||
{d.title}
|
||||
</UsefulBox>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const JRSTraInfoBox = (props) => {
|
||||
const {
|
||||
JRSTraInfoEXAcSR,
|
||||
getTime,
|
||||
setLoadingDelayData,
|
||||
loadingDelayData,
|
||||
delayData,
|
||||
} = props;
|
||||
const styles = {
|
||||
touch: {
|
||||
backgroundColor: "#0099CC",
|
||||
borderRadius: 5,
|
||||
margin: 10,
|
||||
borderColor: "black",
|
||||
borderWidth: 2,
|
||||
overflow: "hidden",
|
||||
},
|
||||
scroll: {
|
||||
backgroundColor: "#0099CC",
|
||||
borderRadius: 5,
|
||||
maxHeight: 300,
|
||||
},
|
||||
bottom: {
|
||||
position: "absolute",
|
||||
top: 250,
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
height: 50,
|
||||
backgroundColor: "#007FCC88",
|
||||
},
|
||||
box: {
|
||||
padding: 10,
|
||||
backgroundColor: "white",
|
||||
borderBottomLeftRadius: 5,
|
||||
borderBottomRightRadius: 5,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
|
||||
style={styles.touch}
|
||||
>
|
||||
<ScrollView scrollEnabled={false} style={styles.scroll}>
|
||||
<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={styles.box}>
|
||||
{loadingDelayData ? (
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<LottieView
|
||||
autoPlay
|
||||
loop
|
||||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||||
source={require("./assets/51690-loading-diamonds.json")}
|
||||
/>
|
||||
</View>
|
||||
) : delayData ? (
|
||||
delayData.map((d, index) => {
|
||||
let data = d.split(" ");
|
||||
return (
|
||||
<View style={{ flexDirection: "row" }} key={data[1] + "key"}>
|
||||
<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={styles.bottom}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||
詳細を見る
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
const FixedContent = (props) => {
|
||||
return (
|
||||
<ScrollView ref={props.scrollRef} scrollEnabled={props.isScroll}>
|
||||
<TopMenuButton />
|
||||
<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: 18 }}>
|
||||
新型コロナウイルスに関するお知らせ
|
||||
</Text>
|
||||
<Text style={{ color: "white", fontSize: 15 }}>
|
||||
列車の運行計画・混雑状況・感染症対策への取り組み
|
||||
</Text>
|
||||
</TextBox>
|
||||
{props.children}
|
||||
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
<TicketBox
|
||||
@ -282,9 +480,7 @@ export default function Menu(props) {
|
||||
backgroundColor="#0099CC"
|
||||
flex={1}
|
||||
onPressButton={() =>
|
||||
Linking.openURL(
|
||||
"https://www.jr-shikoku.co.jp/sp/index.html#menu-box"
|
||||
)
|
||||
Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
|
||||
}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||
@ -493,7 +689,7 @@ export default function Menu(props) {
|
||||
<TextBox
|
||||
backgroundColor="black"
|
||||
flex={1}
|
||||
onPressButton={() => navigate("setting")}
|
||||
onPressButton={() => props.navigate("setting")}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||
アプリの設定
|
||||
@ -509,191 +705,5 @@ export default function Menu(props) {
|
||||
source={require("./assets/トレインビジョン関係/1.svg")}
|
||||
/> */}
|
||||
</ScrollView>
|
||||
<StationDeteilView
|
||||
StationBoardAcSR={StationBoardAcSR}
|
||||
currentStation={
|
||||
originalStationList &&
|
||||
(currentStation
|
||||
? [currentStation, ...locationAndFavorite]
|
||||
: locationAndFavorite)[selectedCurrentStation]
|
||||
}
|
||||
originalStationList={originalStationList}
|
||||
favoriteStation={favoriteStation}
|
||||
setFavoriteStation={setFavoriteStation}
|
||||
busAndTrainData={busAndTrainData}
|
||||
/>
|
||||
<JRSTraInfo
|
||||
JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
|
||||
getTime={getTime}
|
||||
loadingDelayData={loadingDelayData}
|
||||
setLoadingDelayData={setLoadingDelayData}
|
||||
delayData={delayData}
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
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 = [
|
||||
{
|
||||
backgroundColor: "#F89038",
|
||||
icon: "train-car",
|
||||
onPress: () =>
|
||||
Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
|
||||
title: "駅・鉄道情報",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#EA4752",
|
||||
icon: "google-spreadsheet",
|
||||
onPress: () =>
|
||||
Linking.openURL(
|
||||
"https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
|
||||
),
|
||||
title: "運賃表",
|
||||
},
|
||||
{
|
||||
backgroundColor: "#91C31F",
|
||||
icon: "clipboard-list-outline",
|
||||
onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
|
||||
title: "予約",
|
||||
},
|
||||
];
|
||||
return (
|
||||
<View style={{ flexDirection: "row" }}>
|
||||
{buttonList.map((d, index) => (
|
||||
<UsefulBox
|
||||
backgroundColor={d.backgroundColor}
|
||||
icon={d.icon}
|
||||
flex={1}
|
||||
onPressButton={d.onPress}
|
||||
key={index + d.icon}
|
||||
>
|
||||
{d.title}
|
||||
</UsefulBox>
|
||||
))}
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
const JRSTraInfoBox = (props) => {
|
||||
const {
|
||||
JRSTraInfoEXAcSR,
|
||||
getTime,
|
||||
setLoadingDelayData,
|
||||
loadingDelayData,
|
||||
delayData,
|
||||
} = props;
|
||||
const styles = {
|
||||
touch: {
|
||||
backgroundColor: "#0099CC",
|
||||
borderRadius: 5,
|
||||
margin: 10,
|
||||
borderColor: "black",
|
||||
borderWidth: 2,
|
||||
overflow: "hidden",
|
||||
},
|
||||
scroll: {
|
||||
backgroundColor: "#0099CC",
|
||||
borderRadius: 5,
|
||||
maxHeight: 300,
|
||||
},
|
||||
bottom: {
|
||||
position: "absolute",
|
||||
top: 250,
|
||||
alignItems: "center",
|
||||
width: "100%",
|
||||
height: 50,
|
||||
backgroundColor: "#007FCC88",
|
||||
},
|
||||
box: {
|
||||
padding: 10,
|
||||
backgroundColor: "white",
|
||||
borderBottomLeftRadius: 5,
|
||||
borderBottomRightRadius: 5,
|
||||
},
|
||||
};
|
||||
return (
|
||||
<TouchableOpacity
|
||||
onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
|
||||
style={styles.touch}
|
||||
>
|
||||
<ScrollView scrollEnabled={false} style={styles.scroll}>
|
||||
<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={styles.box}>
|
||||
{loadingDelayData ? (
|
||||
<View style={{ alignItems: "center" }}>
|
||||
<LottieView
|
||||
autoPlay
|
||||
loop
|
||||
style={{ width: 150, height: 150, backgroundColor: "#fff" }}
|
||||
source={require("./assets/51690-loading-diamonds.json")}
|
||||
/>
|
||||
</View>
|
||||
) : delayData ? (
|
||||
delayData.map((d, index) => {
|
||||
let data = d.split(" ");
|
||||
return (
|
||||
<View style={{ flexDirection: "row" }} key={data[1] + "key"}>
|
||||
<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={styles.bottom}>
|
||||
<View style={{ flex: 1 }} />
|
||||
<Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
|
||||
詳細を見る
|
||||
</Text>
|
||||
<View style={{ flex: 1 }} />
|
||||
</View>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user