スクロール範囲外にステータスを移動し、高さと文字サイズ等の調整

This commit is contained in:
harukin-OneMix4 2023-07-07 00:07:21 +09:00
parent dfe3c831bc
commit eb806e3f8a

View File

@ -122,72 +122,107 @@ export const EachTrainInfo = ({
/>
)}
</View>
<View
style={{ flexDirection: "row", height: heightPercentageToDP("20%") }}
>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "#0099CC" }} t>
現在地
</Text>
<View style={{ flex: 1 }} />
{data.trainData?.Pos && data.trainData?.Pos.match("") ? (
<>
<Text
style={{
fontSize: 28,
color: "#0099CC",
textAlign: "right",
}}
>
{data.trainData?.Pos.split("")[0]}
</Text>
<Text style={{ color: "#0099CC", textAlign: "right" }}></Text>
<Text
style={{
fontSize: 28,
color: "#0099CC",
textAlign: "right",
}}
>
{data.trainData?.Pos.split("")[1]}
</Text>
</>
) : (
<Text
style={{ fontSize: 28, color: "#0099CC", textAlign: "right" }}
>
{data.trainData?.Pos}
</Text>
)}
</View>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "#0099CC" }}>
{isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
</Text>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: 32,
color: "#0099CC",
textAlign: "right",
}}
>
{data.trainData?.delay}
{isNaN(data.trainData?.delay) ? "" : "分"}
</Text>
</View>
<View
style={{
flex: 1,
backgroundColor: "white",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "#0099CC" }}>列番</Text>
<Text
style={{
fontSize: 32,
color: "#0099CC",
textAlign: "right",
}}
>
{data.trainData?.num}
</Text>
</View>
</View>
</View>
<ScrollView
style={{ maxHeight: heightPercentageToDP("70%") }}
style={{ maxHeight: heightPercentageToDP("55%") }}
nestedScrollEnabled
onScroll={(e) => {
if (!Platform.OS !== "android") return;
setIsTop(e.nativeEvent.contentOffset.y < 0);
}}
>
<View style={{ flexDirection: "row" }}>
<View
style={{
flex: 1,
backgroundColor: "black",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "white" }} t>
現在地
</Text>
<View style={{ flex: 1 }} />
<Text
style={{ fontSize: 30, color: "white", textAlign: "right" }}
>
{data.trainData?.Pos}
</Text>
</View>
<View style={{ flex: 1, flexDirection: "column" }}>
<View
style={{
flex: 1,
backgroundColor: "black",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "white" }}>
{isNaN(data.trainData?.delay) ? "状態" : "遅延時分"}
</Text>
<Text
style={{ fontSize: 30, color: "white", textAlign: "right" }}
>
{data.trainData?.delay}
{isNaN(data.trainData?.delay) ? "" : "分"}
</Text>
</View>
<View
style={{
flex: 1,
backgroundColor: "black",
borderRadius: 10,
padding: 10,
margin: 10,
}}
>
<Text style={{ fontSize: 10, color: "white" }}>列番</Text>
<Text
style={{ fontSize: 30, color: "white", textAlign: "right" }}
>
{data.trainData?.num}
</Text>
</View>
</View>
</View>
<View
style={{
padding: 10,