全コンポーネントをcomponentからchildへ移動

App.js

@@ -10,10 +10,10 @@ import { Platform, UIManager } from "react-native";
 import { UpdateAsync } from "./UpdateAsync.js";
 import { getStationList2 } from "./lib/getStationList2";
 import Apps from "./Apps";
-import tndView from "./ndView";
+import TNDView from "./ndView";
 import TrainBase from "./trainbaseview";
 import HowTo from "./howto";
-import menu from "./menu";
+import Menu from "./menu";
 import News from "./components/news.js";
 import Setting from "./components/settings.js";
 import TrainMenu from "./components/trainMenu.js";
@@ -35,40 +35,43 @@ export default function App() {
       <Tab.Navigator>
         <Tab.Screen
           name="login"
-          component={Top}
           options={{
             tabBarLabel: "位置情報",
             headerTransparent: true,
             gestureEnabled: true,
             tabBarIcon: initIcon("barchart", "AntDesign"),
           }}
-        />
+        >
+          {(props) => <Top {...props} />}
+        </Tab.Screen>
         <Tab.Screen
           name="menuPage"
-          component={menuPage}
           options={{
             tabBarLabel: "リンク",
             headerTransparent: true,
             gestureEnabled: true,
             tabBarIcon: initIcon("ios-radio", "Ionicons"),
           }}
-        />
+        >
+          {(props) => <MenuPage {...props} />}
+        </Tab.Screen>
         <Tab.Screen
           name="home"
-          component={tndView}
           options={{
             tabBarLabel: "運行情報",
             headerTransparent: true,
             gestureEnabled: true,
             tabBarIcon: initIcon("md-train", "Ionicons"),
           }}
-        />
+        >
+          {(props) => <TNDView {...props} />}
+        </Tab.Screen>
       </Tab.Navigator>
     </NavigationContainer>
   );
 }
 
-const initIcon = (name, type, props) => {
+const initIcon = (name, type) => {
   switch (type) {
     case "Ionicons":
       return ({ focused, color, size }) => (
@@ -161,22 +164,24 @@ const Top = ({ navigation }) => {
     </Stack.Navigator>
   );
 };
-function menuPage() {
+function MenuPage() {
   return (
     <Stack.Navigator>
       <Stack.Screen
         name="menu"
-        component={menu}
         options={{
           headerShown: false,
           gestureEnabled: true,
           headerTransparent: true,
         }}
-      />
-      <Stack.Screen name="setting" component={Setting} options={optionData} />
+      >
+        {(props) => <Menu {...props} />}
+      </Stack.Screen>
+      <Stack.Screen name="setting" options={optionData}>
+        {(props) => <Setting {...props} />}
+      </Stack.Screen>
       <Stack.Screen
         name="trainbase"
-        component={TrainBase}
         options={{
           ...TransitionPresets.ModalPresentationIOS,
           cardOverlayEnabled: true,
@@ -185,7 +190,9 @@ function menuPage() {
           headerTransparent: true,
           gestureResponseDistance: { vertical: 300 },
         }}
-      />
+      >
+        {(props) => <TrainBase {...props} />}
+      </Stack.Screen>
     </Stack.Navigator>
   );
 }