ふぁぼりすとを作成

App.js

@@ -16,6 +16,7 @@ import menu from "./menu";
 import News from "./components/news.js";
 import Setting from "./components/settings.js";
 import trainMenu from "./components/trainMenu.js";
+import FavoriteList from "./components/FavoriteList.js";
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
 if (Platform.OS === "android") {
@@ -95,6 +96,11 @@ const top = () => (
     />
     <Stack.Screen name="news" component={News} options={optionData} />
     <Stack.Screen name="trainMenu" component={trainMenu} options={optionData} />
+    <Stack.Screen
+      name="favoriteList"
+      component={FavoriteList}
+      options={{ ...optionData, gestureEnabled: false }}
+    />
   </Stack.Navigator>
 );
 function menuPage() {

components/FavoriteList.js

@@ -0,0 +1,115 @@
+import React, { Component, useRef, useState, useEffect } from "react";
+import { View, Text, TouchableOpacity, ScrollView } from "react-native";
+import { WebView } from "react-native-webview";
+import { ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
+import StatusbarDetect from "../StatusbarDetect";
+import { AS } from "../storageControl";
+import { news } from "../config/newsUpdate";
+import { getStationList, lineList } from "../lib/getStationList";
+var Status = StatusbarDetect();
+export default function FavoriteList(props) {
+  const {
+    route: {
+      params: { webview, stationData },
+    },
+    navigation: { navigate },
+  } = props;
+
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        console.log(d);
+        const returnData = JSON.parse(d);
+        console.log(returnData);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+
+  return (
+    <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
+      <ScrollView style={{ height: "100%", backgroundColor: "white" }}>
+        {favoriteStation
+          .filter((d) => d[0].StationMap)
+          .map((currentStation) => {
+            console.log(currentStation);
+            return (
+              <ListItem
+                onPress={() => {
+                  const getStationLine = (now) => {
+                    const returnData = Object.keys(stationData).filter((d) => {
+                      const cache = stationData[d].findIndex(
+                        (data) => data.Station_JP == now.Station_JP
+                      );
+                      return cache != -1;
+                    });
+                    return returnData[0];
+                  };
+                  const lineName = getStationLine(currentStation[0]);
+
+                  webview.current?.injectJavaScript(
+                    `MoveDisplayStation('${lineName}_${currentStation[0].MyStation}_${currentStation[0].Station_JP}')`
+                  );
+                  navigate("Apps");
+                }}
+              >
+                <Text style={{ fontSize: 20, flex: 2 }}>
+                  {currentStation
+                    .map((d) => d.StationNumber)
+                    .filter((d) => d !== null)
+                    .join("/")}
+                </Text>
+                <Text style={{ fontSize: 20, flex: 3 }}>
+                  {currentStation[0].Station_JP}
+                </Text>
+                <View
+                  style={{
+                    flex: 2,
+                    flexDirection: "row",
+                    alignContent: "center",
+                    alignItems: "center",
+                  }}
+                >
+                  <View style={{ flex: 1 }} />
+                  <Text style={{ fontSize: 20 }}>移動する</Text>
+                  <Icon name="chevron-right" size={20} />
+                </View>
+              </ListItem>
+            );
+          })}
+      </ScrollView>
+      <Text
+        style={{
+          backgroundColor: "white",
+          borderWidth: 1,
+          borderStyle: "solid",
+        }}
+      >
+        お気に入り登録した駅のうち、位置情報システムで移動可能な駅が表示されています。タップすることで位置情報システムの当該の駅に移動します。
+      </Text>
+      <TouchableOpacity
+        style={{
+          padding: 10,
+          flexDirection: "row",
+          borderColor: "white",
+          borderWidth: 1,
+          margin: 10,
+          borderRadius: 5,
+          alignItems: "center",
+        }}
+        onPress={() => {
+          navigate("trainMenu");
+        }}
+      >
+        <View style={{ flex: 1 }} />
+        <Text style={{ fontSize: 25, fontWeight: "bold", color: "white" }}>
+          閉じる
+        </Text>
+        <View style={{ flex: 1 }} />
+      </TouchableOpacity>
+    </View>
+  );
+}

components/trainMenu.js

@@ -68,10 +68,7 @@ export default function trainMenu({
           icon="star"
           flex={1}
           onPressButton={() =>
-            /* Linking.openURL(
-              "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-            ) */
-            alert("お気に入り駅登録機能は現在開発中です！レイアウト募集中！")
+            navigate("favoriteList", { webview, stationData })
           }
         >
           お気に入り