ふぁぼ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} />}