下部の駅ナンバーも色が路線に応じて可変するように変更、文字を太字に変更

components/駅名表/NextPreStationLine.tsx

@@ -2,6 +2,7 @@ import React, { CSSProperties, FC } from "react";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 import { StationName } from "./StationName";
+import lineColorList from "../../assets/originData/lineColorList";
 export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
   return (
     <View style={下枠フレーム}>
@@ -52,16 +53,25 @@ const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
 };
 
 const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
+  const lineID = children.slice(0, 1);
+  const lineName = children.slice(1);
   return (
-    <View style={isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー}>
+    <View
+      style={{
+        ...(isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー),
+        borderColor: lineColorList[lineID],
+      }}
+    >
       <View style={{ flex: 1 }} />
       <Text
         style={{
           fontSize: parseInt("10%"),
-          color: isMatsuyama ? "black" : "white",
+          color: "black",
+          textAlign: "center",
+          fontWeight: "bold",
         }}
       >
-        {children}
+        {lineID + "\n" + lineName}
       </Text>
       <View style={{ flex: 1 }} />
     </View>
@@ -87,8 +97,8 @@ const 下枠駅ナンバー: ViewStyle = {
   width: wp("8%"),
   height: wp("8%"),
   margin: wp("1%"),
-  borderColor: "white",
+  backgroundColor: "white",
-  borderWidth: parseInt("2%"),
+  borderWidth: parseInt("3%"),
   borderRadius: parseInt("100%"),
 };
 const 下枠駅ナンバーB: ViewStyle = {
@@ -97,8 +107,7 @@ const 下枠駅ナンバーB: ViewStyle = {
   width: wp("7%"),
   height: wp("7%"),
   margin: wp("2%"),
-  borderColor: "black",
   backgroundColor: "white",
-  borderWidth: parseInt("2%"),
+  borderWidth: parseInt("3%"),
   borderRadius: parseInt("100%"),
 };

components/駅名表/StationNumberMaker.tsx

@@ -41,6 +41,7 @@ export const StationNumberMaker = (props) => {
               padding: 0,
               textAlign: "center",
               color:  "black",
+              fontWeight: "bold",
             }}
           >
             {lineID + "\n" + lineName}