ふぁぼstateをトップ階層に移動し各コンポーネントで共有化

App.js

@@ -9,6 +9,7 @@ import { AntDesign, Ionicons } from "@expo/vector-icons";
 import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
 import { getStationList2 } from "./lib/getStationList2";
+import { AS } from "./storageControl";
 import Apps from "./Apps";
 import TNDView from "./ndView";
 import TrainBase from "./trainbaseview";
@@ -29,6 +30,16 @@ export default function App() {
   useEffect(() => {
     UpdateAsync();
   }, []);
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        const returnData = JSON.parse(d);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
 
   return (
     <NavigationContainer name="Root" style={{ flex: 1 }}>
@@ -42,7 +53,13 @@ export default function App() {
             tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
         >
-          {(props) => <Top {...props} />}
+          {(props) => (
+            <Top
+              {...props}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
+            />
+          )}
         </Tab.Screen>
         <Tab.Screen
           name="menuPage"
@@ -53,7 +70,13 @@ export default function App() {
             tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
         >
-          {(props) => <MenuPage {...props} />}
+          {(props) => (
+            <MenuPage
+              {...props}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
+            />
+          )}
         </Tab.Screen>
         <Tab.Screen
           name="home"
@@ -88,7 +111,7 @@ const initIcon = (name, type) => {
   }
 };
 
-const Top = ({ navigation }) => {
+const Top = ({ navigation, favoriteStation, setFavoriteStation }) => {
   const webview = useRef();
 
   //地図用
@@ -116,7 +139,14 @@ const Top = ({ navigation }) => {
           headerTransparent: true,
         }}
       >
-        {(props) => <Apps {...props} webview={webview} />}
+        {(props) => (
+          <Apps
+            {...props}
+            webview={webview}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
       </Stack.Screen>
       <Stack.Screen
         name="trainbase"
@@ -126,7 +156,7 @@ const Top = ({ navigation }) => {
           ...TransitionPresets.SlideFromRightIOS,
         }}
       >
-        {(props) => <TrainBase {...props} webview={webview} />}
+        {(props) => <TrainBase {...props} />}
       </Stack.Screen>
       <Stack.Screen
         name="howto"
@@ -158,13 +188,15 @@ const Top = ({ navigation }) => {
             {...props}
             webview={webview}
             stationData={mapsStationData}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
           />
         )}
       </Stack.Screen>
     </Stack.Navigator>
   );
 };
-function MenuPage() {
+function MenuPage({ favoriteStation, setFavoriteStation }) {
   return (
     <Stack.Navigator>
       <Stack.Screen
@@ -175,7 +207,13 @@ function MenuPage() {
           headerTransparent: true,
         }}
       >
-        {(props) => <Menu {...props} />}
+        {(props) => (
+          <Menu
+            {...props}
+            favoriteStation={favoriteStation}
+            setFavoriteStation={setFavoriteStation}
+          />
+        )}
       </Stack.Screen>
       <Stack.Screen name="setting" options={optionData}>
         {(props) => <Setting {...props} />}

Apps.js

@@ -19,7 +19,12 @@ import { getStationList2 } from "./lib/getStationList2";
 import StatusbarDetect from './StatusbarDetect';
 var Status = StatusbarDetect(); */
 
-export default function Apps({ navigation, webview }) {
+export default function Apps({
+  navigation,
+  webview,
+  favoriteStation,
+  setFavoriteStation,
+}) {
   const { navigate } = navigation;
   var urlcache = "";
 
@@ -192,6 +197,8 @@ export default function Apps({ navigation, webview }) {
         StationBoardAcSR={StationBoardAcSR}
         currentStation={stationBoardData}
         originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
       />
     </View>
   );

components/ActionSheetComponents/StationDeteilView.js

@@ -7,7 +7,13 @@ import Sign from "../../components/駅名表/Sign";
 import { TicketBox } from "../atom/TicketBox";
 
 export const StationDeteilView = (props) => {
-  const { StationBoardAcSR, currentStation, originalStationList } = props;
+  const {
+    StationBoardAcSR,
+    currentStation,
+    originalStationList,
+    favoriteStation,
+    setFavoriteStation,
+  } = props;
 
   return (
     <ActionSheet
@@ -41,6 +47,8 @@ export const StationDeteilView = (props) => {
             <Sign
               currentStation={currentStation}
               originalStationList={originalStationList}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
               oP={() => Linking.openURL(currentStation[0].StationTimeTable)}
             />
           )}

components/FavoriteList.js

@@ -8,20 +8,14 @@ import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
 import { getStationList, lineList } from "../lib/getStationList";
 var Status = StatusbarDetect();
-export default function FavoriteList({ navigation, webview, stationData }) {
+export default function FavoriteList({
+  navigation,
+  webview,
+  stationData,
+  favoriteStation,
+  setFavoriteStation,
+}) {
   const { navigate } = navigation;
-  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" }}>

components/駅名表/Sign.js

@@ -17,24 +17,19 @@ import { useInterval } from "../../lib/useInterval";
 import { AS } from "../../storageControl";
 
 export default function Sign(props) {
-  const { currentStation, originalStationList, oP } = props;
+  const {
+    currentStation,
+    originalStationList,
+    oP,
+    favoriteStation,
+    setFavoriteStation,
+  } = props;
   const [nexPrePosition, setNexPrePosition] = useState(0);
 
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
   const [testButtonStatus, setTestButtonStatus] = useState(false);
-  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));
-  }, []);
   useEffect(() => {
     const isFavorite = favoriteStation.filter((d) => {
       const compare = JSON.stringify(d);
@@ -116,12 +111,14 @@ export default function Sign(props) {
               }
             });
             AS.setItem("favoriteStation", JSON.stringify(otherData));
+            setFavoriteStation(otherData);
           } else {
             lottieRef.current.play(7, 35);
             let ret = favoriteStation;
             console.log(currentStation);
             ret.push(currentStation);
             AS.setItem("favoriteStation", JSON.stringify(ret));
+            setFavoriteStation(ret);
           }
           setTestButtonStatus(!testButtonStatus);
         }}

menu.js

@@ -38,6 +38,8 @@ import useInterval from "./lib/useInterval";
 export default function Menu(props) {
   const {
     navigation: { navigate },
+    favoriteStation,
+    setFavoriteStation,
   } = props;
   const JRSTraInfoEXAcSR = useRef(null);
   const StationBoardAcSR = useRef(null);
@@ -162,6 +164,8 @@ export default function Menu(props) {
             <Sign
               currentStation={currentStation}
               originalStationList={originalStationList}
+              favoriteStation={favoriteStation}
+              setFavoriteStation={setFavoriteStation}
               oP={StationBoardAcSR.current?.setModalVisible}
             />
             <LED_vision station={currentStation[0]} navigate={navigate} />
@@ -458,6 +462,8 @@ export default function Menu(props) {
         StationBoardAcSR={StationBoardAcSR}
         currentStation={currentStation}
         originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
       />
       <JRSTraInfo
         JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}