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

FixedBoxを拡張可能に変更

Browse Source
This commit is contained in:
harukin-expo-dev-env
2025-09-14 18:25:06 +00:00
parent 3531a128ab
commit acb1849544
3 changed files with 449 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/Apps/FixedPositionBox.tsx
View File

@@ -3,9 +3,11 @@ import { View, Platform } from "react-native";
import Constants from "expo-constants"; import Constants from "expo-constants";
import { FixedTrain } from "./FixedPositionBox/FixedTrainBox"; import { FixedTrain } from "./FixedPositionBox/FixedTrainBox";
import { FixedStation } from "./FixedPositionBox/FixedStationBox"; import { FixedStation } from "./FixedPositionBox/FixedStationBox";
import { useState } from "react";
export const FixedPositionBox = () => { export const FixedPositionBox = () => {
const { fixedPosition, setFixedPosition } = useCurrentTrain(); const { fixedPosition, setFixedPosition } = useCurrentTrain();
const [displaySize, setDisplaySize] = useState(50);
return ( return (
<View <View
@@ -15,17 +17,24 @@ export const FixedPositionBox = () => {
borderRadius: 5, borderRadius: 5,
zIndex: 1500, zIndex: 1500,
width: "100%", width: "100%",
height: 50, height: displaySize,
flexDirection: "row", flexDirection: "row",
}} }}
> >
{fixedPosition.type === "station" && ( {fixedPosition.type === "station" && (
<FixedStation stationID={fixedPosition.value} /> <FixedStation
stationID={fixedPosition.value}
displaySize={displaySize}
setDisplaySize={setDisplaySize}
/>
)} )}
{fixedPosition.type === "train" && ( {fixedPosition.type === "train" && (
<FixedTrain trainID={fixedPosition.value} /> <FixedTrain
trainID={fixedPosition.value}
displaySize={displaySize}
setDisplaySize={setDisplaySize}
/>
)} )}
</View> </View>
); );
}; };

148
components/Apps/FixedPositionBox/FixedStationBox.tsx
View File

@@ -15,17 +15,27 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
import { useAreaInfo } from "@/stateBox/useAreaInfo"; import { useAreaInfo } from "@/stateBox/useAreaInfo";
import { useCurrentTrain } from "@/stateBox/useCurrentTrain"; import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList } from "@/stateBox/useStationList"; import { useStationList } from "@/stateBox/useStationList";
import { Ionicons } from "@expo/vector-icons";
import { useNavigation } from "@react-navigation/native";
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { Text, TouchableOpacity, View } from "react-native"; import { LayoutAnimation, Text, TouchableOpacity, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
type props = { type props = {
stationID: string; stationID: string;
displaySize: number;
setDisplaySize: (size: number) => void;
}; };
export const FixedStation: FC<props> = ({ stationID }) => { export const FixedStation: FC<props> = ({
stationID,
displaySize,
setDisplaySize,
}) => {
const { currentTrain, setFixedPosition } = useCurrentTrain(); const { currentTrain, setFixedPosition } = useCurrentTrain();
const { getStationDataFromId } = useStationList(); const { getStationDataFromId } = useStationList();
const { navigate } = useNavigation();
const [station, setStation] = useState<StationProps[]>([]); const [station, setStation] = useState<StationProps[]>([]);
useEffect(() => { useEffect(() => {
const data = getStationDataFromId(stationID); const data = getStationDataFromId(stationID);
@@ -88,9 +98,23 @@ export const FixedStation: FC<props> = ({ stationID }) => {
return ( return (
<TouchableOpacity <TouchableOpacity
style={{ flex: 1, flexDirection: "row" }} style={{
flex: 1,
flexDirection: "row",
borderBottomColor: lineColor,
borderBottomWidth: 2,
position: "relative",
}}
activeOpacity={1}
onPress={() => { onPress={() => {
setFixedPosition({ type: null, value: null }); const payload = {
currentStation: station,
navigate,
goTo: "menu",
onExit: () => SheetManager.hide("StationDetailView"),
};
//@ts-ignore
SheetManager.show("StationDetailView", { payload });
}} }}
> >
<View <View
@@ -157,7 +181,7 @@ export const FixedStation: FC<props> = ({ stationID }) => {
flex: 1, flex: 1,
}} }}
> >
<Text style={{ fontSize: 20 }}>次の発車予定：</Text> <Text style={{ fontSize: 18 }}>次の発車予定：</Text>
</View> </View>
</View> </View>
@@ -176,22 +200,130 @@ export const FixedStation: FC<props> = ({ stationID }) => {
<FixedStationBoxEachTrain <FixedStationBoxEachTrain
d={d} d={d}
station={station[0]} station={station[0]}
displaySize={displaySize}
key={d.train + "-fixedStationBox"} key={d.train + "-fixedStationBox"}
/> />
)) ))
) : ( ) : (
<View style={{ backgroundColor: "white", flex: 1 }}> <View style={{ backgroundColor: "white", flex: 1 }}>
<Text style={{ fontSize: parseInt("11%") }}> <Text style={{ fontSize: parseInt("11%") }}>
当駅を発着する走行中の列車はありません。 当駅を発着する走行中の列車はありません。
</Text> </Text>
</View> </View>
)} )}
</View> </View>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
left: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
setFixedPosition({ type: null, value: null });
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: lineColor,
paddingHorizontal: 5,
}}
>
<Ionicons name="lock-closed" size={15} color="white" />
<Text
style={{
color: "white",
fontSize: 15,
paddingRight: 5,
}}
>
駅位置ロック中
</Text>
<Ionicons name="close" size={15} color="white" />
</View>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: lineColor,
borderTopColor: lineColor,
borderBottomColor: "#0000",
borderRightColor: "#0000",
borderBottomWidth: 22,
borderLeftWidth: 10,
borderRightWidth: 0,
borderTopWidth: 0,
height: 20,
}}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
right: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
if (displaySize === 50) {
setDisplaySize(200);
} else {
setDisplaySize(50);
}
}}
>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "#0000",
borderTopColor: lineColor,
borderBottomColor: "#0000",
borderRightColor: lineColor,
borderBottomWidth: 22,
borderLeftWidth: 0,
borderRightWidth: 10,
borderTopWidth: 0,
height: 20,
}}
/>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: lineColor,
paddingHorizontal: 5,
}}
pointerEvents="none"
>
<Ionicons
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
size={15}
color="white"
/>
<Text
style={{
color: "white",
paddingRight: 5,
backgroundColor: lineColor,
fontSize: 15,
}}
>
{displaySize == 50 ? "時刻表を展開する" : "時刻表を縮小する"}
</Text>
</View>
</TouchableOpacity>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const FixedStationBoxEachTrain = ({ d, station }) => { const FixedStationBoxEachTrain = ({ d, station, displaySize }) => {
const { currentTrain } = useCurrentTrain(); const { currentTrain } = useCurrentTrain();
const { stationList } = useStationList(); const { stationList } = useStationList();
const { allCustomTrainData } = useAllTrainDiagram(); const { allCustomTrainData } = useAllTrainDiagram();
@@ -216,7 +348,7 @@ const FixedStationBoxEachTrain = ({ d, station }) => {
style={{ style={{
backgroundColor: "white", backgroundColor: "white",
flexDirection: "row", flexDirection: "row",
height: "33%", height: displaySize == 50 ? "33%" : "7.5%",
overflow: "visible", overflow: "visible",
}} }}
> >

403
components/Apps/FixedPositionBox/FixedTrainBox.tsx
View File

@@ -4,7 +4,13 @@ import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
import { useStationList } from "@/stateBox/useStationList"; import { useStationList } from "@/stateBox/useStationList";
import { StationProps } from "@/lib/CommonTypes"; import { StationProps } from "@/lib/CommonTypes";
import { FC, useEffect, useState } from "react"; import { FC, useEffect, useState } from "react";
import { Text, TouchableOpacity, View, Image } from "react-native"; import {
Text,
TouchableOpacity,
View,
Image,
LayoutAnimation,
} from "react-native";
import { getTrainType } from "@/lib/getTrainType"; import { getTrainType } from "@/lib/getTrainType";
import { trainPosition } from "@/lib/trainPositionTextArray"; import { trainPosition } from "@/lib/trainPositionTextArray";
import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker"; import { StationNumberMaker } from "@/components/駅名表/StationNumberMaker";
@@ -12,12 +18,19 @@ import { lineListPair, stationIDPair } from "@/lib/getStationList";
import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints"; import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoints";
import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes"; import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
import { getCurrentTrainData } from "@/lib/getCurrentTrainData"; import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
import { Ionicons } from "@expo/vector-icons";
type props = { type props = {
trainID: string; trainID: string;
displaySize: number;
setDisplaySize: (e: number) => void;
}; };
export const FixedTrain: FC<props> = ({ trainID }) => { export const FixedTrain: FC<props> = ({
trainID,
displaySize,
setDisplaySize,
}) => {
const { const {
fixedPosition, fixedPosition,
setFixedPosition, setFixedPosition,
@@ -37,9 +50,13 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
delay?: string | number; delay?: string | number;
num?: string; num?: string;
}>(null); }>(null);
const [customData, setCustomData] = useState<CustomTrainData>(getCurrentTrainData(trainID, currentTrain, allCustomTrainData)); const [customData, setCustomData] = useState<CustomTrainData>(
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
);
useEffect(() => { useEffect(() => {
setCustomData(getCurrentTrainData(trainID, currentTrain, allCustomTrainData)); setCustomData(
getCurrentTrainData(trainID, currentTrain, allCustomTrainData)
);
}, [currentTrain, trainID]); }, [currentTrain, trainID]);
useEffect(() => { useEffect(() => {
const stationData = getCurrentStationData(trainID); const stationData = getCurrentStationData(trainID);
@@ -133,7 +150,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
}, []).map((d) => d.StationNumber); }, []).map((d) => d.StationNumber);
return StationNumbers; return StationNumbers;
}); });
const [currentPosition, setCurrentPosition] = useState([]); const [currentPosition, setCurrentPosition] = useState<string[]>([]);
useEffect(() => { useEffect(() => {
const position = getPosition(train); const position = getPosition(train);
@@ -189,28 +206,47 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
const data = getStationDataFromName(ToData); const data = getStationDataFromName(ToData);
setStation(data); setStation(data);
}, [ToData]); }, [ToData]);
const lineColor = // const lineColor =
station.length > 0 // station.length > 0
? lineColorList[station[0]?.StationNumber.slice(0, 1)] // ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
: "black"; // : "black";
const customTrainType = getTrainType({ type: customData.type, whiteMode: true }); const lineColor = "red";
const customTrainType = getTrainType({
type: customData.type,
whiteMode: true,
});
return ( return (
<TouchableOpacity <TouchableOpacity
style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }} style={{
flex: 1,
flexDirection: displaySize === 50 ? "row" : "column",
backgroundColor: "black",
borderBottomColor: "black",
borderBottomWidth: 2,
position: "relative",
}}
activeOpacity={1}
onPress={() => { onPress={() => {
setFixedPosition({ type: null, value: null }); //setFixedPosition({ type: null, value: null });
}} }}
> >
<View <View
style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }} style={{
flexDirection: displaySize === 50 ? "column" : "row",
flex: 1,
backgroundColor: "white",
height: displaySize === 50 ? 50 : 200,
overflow: "hidden",
}}
> >
<View style={{ flex: 1, flexDirection: "row" }}> <View style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}>
<View <View
style={{ style={{
backgroundColor: customTrainType.color, backgroundColor: customTrainType.color,
flexDirection: "row", flexDirection: "row",
alignContent: "center", alignContent: "center",
alignSelf: "center", alignSelf: "center",
alignItems: "center",
height: "100%", height: "100%",
}} }}
> >
@@ -222,7 +258,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
/> />
<View <View
style={{ style={{
flexDirection: "row", flexDirection: displaySize === 50 ? "row" : "column",
alignContent: "center", alignContent: "center",
alignSelf: "center", alignSelf: "center",
}} }}
@@ -230,8 +266,12 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
<Text <Text
style={{ style={{
fontSize: 14, fontSize: 14,
fontFamily: customTrainType.fontAvailable ? "JR-Nishi" : undefined, fontFamily: customTrainType.fontAvailable
fontWeight: !customTrainType.fontAvailable ? "bold" : undefined, ? "JR-Nishi"
: undefined,
fontWeight: !customTrainType.fontAvailable
? "bold"
: undefined,
marginTop: customTrainType.fontAvailable ? 3 : 0, marginTop: customTrainType.fontAvailable ? 3 : 0,
color: "white", color: "white",
textAlignVertical: "center", textAlignVertical: "center",
@@ -245,7 +285,7 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
style={{ style={{
fontSize: customData?.trainName?.length > 6 ? 9 : 14, fontSize: customData?.trainName?.length > 6 ? 9 : 14,
color: "white", color: "white",
maxWidth: 65, maxWidth: displaySize === 50 ? 65 : 200,
textAlignVertical: "center", textAlignVertical: "center",
}} }}
> >
@@ -260,10 +300,12 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
borderLeftColor: customTrainType.color, borderLeftColor: customTrainType.color,
borderTopColor: lineColor, borderTopColor: lineColor,
borderBottomColor: lineColor, borderBottomColor: lineColor,
borderTopWidth: 14, borderTopWidth: displaySize === 50 ? 14 : 50,
borderBottomWidth: 14, borderBottomWidth: displaySize === 50 ? 14 : 50,
borderLeftWidth: 10, borderLeftWidth: displaySize === 50 ? 10 : 30,
borderRightWidth: 0, borderRightWidth: 0,
//height: displaySize === 50 ? 20 : 100,
height: "100%",
}} }}
></View> ></View>
</View> </View>
@@ -306,11 +348,26 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
</View> </View>
</View> </View>
</View> </View>
{displaySize === 200 && (
<View
style={{
backgroundColor: "white",
width: 10,
borderLeftColor: "black",
borderTopColor: lineColor,
borderBottomColor: "white",
borderRightColor: "black",
borderTopWidth: 50,
borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 20,
}}
></View>
)}
<View <View
style={{ style={{
backgroundColor: "black", backgroundColor: "black",
flex: 1, flex: displaySize === 50 ? 1 : 4,
flexDirection: "row", flexDirection: "row",
alignItems: "center", alignItems: "center",
}} }}
@@ -340,32 +397,149 @@ export const FixedTrain: FC<props> = ({ trainID }) => {
> >
{nextStationData[0]?.Station_JP || "不明"} {nextStationData[0]?.Station_JP || "不明"}
</Text> </Text>
<View {displaySize === 50 && (
style={{ <View
backgroundColor: "white", style={{
width: 10, backgroundColor: "white",
borderLeftColor: "black", width: 10,
borderTopColor: "black", borderLeftColor: "black",
borderBottomColor: "white", borderTopColor: "black",
borderRightColor: "white", borderBottomColor: "white",
borderTopWidth: 25, borderRightColor: "white",
borderBottomWidth: 0, borderTopWidth: 21,
borderLeftWidth: 0, borderBottomWidth: 0,
borderRightWidth: 10, borderLeftWidth: 0,
}} borderRightWidth: 7,
></View> }}
></View>
)}
</View> </View>
</View> </View>
<CurrentPositionBox <CurrentPositionBox
train={train} train={train}
lineColor={lineColor} lineColor={lineColor}
trainDataWithThrough={untilStationData} trainDataWithThrough={untilStationData}
isSmall={displaySize === 50}
/> />
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
left: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
setFixedPosition({ type: null, value: null });
}}
>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: "black",
paddingHorizontal: 5,
height: 26,
}}
>
<Ionicons name="lock-closed" size={15} color="white" />
<Text
style={{
color: "white",
fontSize: 15,
paddingRight: 5,
}}
>
列車追跡中
</Text>
<Ionicons name="close" size={15} color="white" />
</View>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "black",
borderTopColor: "black",
borderBottomColor: "#0000",
borderRightColor: "#0000",
borderBottomWidth: 26,
borderLeftWidth: 10,
borderRightWidth: 0,
borderTopWidth: 0,
height: 26,
}}
/>
</TouchableOpacity>
<TouchableOpacity
style={{
position: "absolute",
top: "100%",
right: 0,
flexDirection: "row",
alignItems: "center",
}}
onPress={() => {
LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
if (displaySize === 50) {
setDisplaySize(200);
} else {
setDisplaySize(50);
}
}}
>
<View
style={{
backgroundColor: "#0000",
width: 6,
borderLeftColor: "#0000",
borderTopColor: "black",
borderBottomColor: "#0000",
borderRightColor: "black",
borderBottomWidth: 26,
borderLeftWidth: 0,
borderRightWidth: 10,
borderTopWidth: 0,
height: 26,
}}
/>
<View
style={{
flexDirection: "row",
alignItems: "center",
backgroundColor: "black",
paddingHorizontal: 5,
height: 26,
}}
pointerEvents="none"
>
<Ionicons
name={displaySize == 50 ? "chevron-down" : "chevron-up"}
size={15}
color="white"
/>
<Text
style={{
color: "white",
paddingRight: 5,
backgroundColor: "black",
fontSize: 15,
}}
>
{displaySize == 50 ? "列車情報展開" : "列車情報縮小"}
</Text>
</View>
</TouchableOpacity>
</TouchableOpacity> </TouchableOpacity>
); );
}; };
const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => { const CurrentPositionBox = ({
train,
lineColor,
trainDataWithThrough,
isSmall,
}) => {
let firstText = ""; let firstText = "";
let secondText = ""; let secondText = "";
let marginText = ""; let marginText = "";
@@ -383,39 +557,45 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
} }
} }
return ( return (
<View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}> <View
<View style={{ flexDirection: "column", height: "100%" }}> style={{
<View flex: isSmall ? 1 : 3,
style={{ backgroundColor: "white",
backgroundColor: "white", flexDirection: "row",
width: 10, }}
borderLeftColor: lineColor, >
borderTopColor: lineColor, {isSmall && (
borderBottomColor: "white", <View style={{ flexDirection: "column" }}>
borderRightColor: "white", <View
borderTopWidth: 25, style={{
borderBottomWidth: 0, backgroundColor: "white",
borderLeftWidth: 0, width: 10,
borderRightWidth: 10, borderLeftColor: lineColor,
flex: 1, borderTopColor: lineColor,
}} borderBottomColor: "white",
></View> borderRightColor: "white",
<View borderTopWidth: 28,
style={{ borderBottomWidth: 0,
backgroundColor: "white", borderLeftWidth: 0,
width: 10, borderRightWidth: 10,
borderLeftColor: "white", }}
borderTopColor: "white", ></View>
borderBottomColor: "white", <View
borderRightColor: "white", style={{
borderTopWidth: 25, backgroundColor: "white",
borderBottomWidth: 0, width: 10,
borderLeftWidth: 0, borderLeftColor: "white",
borderRightWidth: 10, borderTopColor: "white",
flex: 1, borderBottomColor: "white",
}} borderRightColor: "white",
></View> borderTopWidth: 18,
</View> borderBottomWidth: 0,
borderLeftWidth: 0,
borderRightWidth: 10,
}}
></View>
</View>
)}
<View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}> <View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}>
{trainDataWithThrough.length > 0 && {trainDataWithThrough.length > 0 &&
trainDataWithThrough.map((d, index, array) => { trainDataWithThrough.map((d, index, array) => {
@@ -424,41 +604,46 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
const [station, se, time] = d.split(","); const [station, se, time] = d.split(",");
return ( return (
<> <>
{(index == 0 && secondText == "") || <View {(index == 0 && secondText == "") || (
style={{ <View
flexDirection: "column", style={{
backgroundColor: "#6e6e6eff", flexDirection: "column",
borderRadius: 10, backgroundColor: "#6e6e6eff",
marginHorizontal: 2, borderRadius: 10,
padding: 2, marginHorizontal: isSmall ? 2 : 4,
justifyContent: "center", marginVertical: isSmall ? 0 : 2,
alignItems: "center", padding: isSmall ? 2 : 4,
overflow: "hidden", justifyContent: "center",
}} alignItems: "center",
key={d+"CurrentPositionBox"} overflow: "hidden",
> }}
{station.split("").map((i, index) => { key={d + "CurrentPositionBox"}
return ( >
<Text {station.split("").map((i, index) => {
key={i+index} return (
style={{ <Text
fontSize: 6, key={i + index}
color: "white", style={{
margin: 0, fontSize: isSmall ? 6 : 14,
padding: 0, color: "white",
fontWeight: "bold", margin: 0,
}} padding: 0,
> fontWeight: "bold",
{i} }}
</Text> >
); {i}
})} </Text>
<View style={{ flex: 1 }} /> );
<Text style={{ fontSize: 8, color: "white" }}> })}
{se.includes("通") ? "" : "●"} <View style={{ flex: 1 }} />
</Text> <Text
</View>} style={{ fontSize: isSmall ? 8 : 14, color: "white" }}
{(index == 0 && secondText != "") && ( >
{se.includes("通") ? "" : "●"}
</Text>
</View>
)}
{index == 0 && secondText != "" && (
<View <View
style={{ style={{
flexDirection: "column", flexDirection: "column",
@@ -472,7 +657,11 @@ const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
}} }}
> >
<View style={{ flex: 1 }} /> <View style={{ flex: 1 }} />
<Text style={{ fontSize: 8, color: "black" }}>＞</Text> <Text
style={{ fontSize: isSmall ? 8 : 14, color: "black" }}
>
＞
</Text>
</View> </View>
)} )}
</> </>