observerを利用した新型のトレインビューボタン化改造機能

App.js

@@ -1,59 +1,158 @@
-import React, { useEffect, useRef } from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator,TransitionPresets ,} from '@react-navigation/stack';
-import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
-import { AntDesign, Ionicons } from '@expo/vector-icons';
-import {ToastAndroid, Platform, UIManager,} from 'react-native';
-import { UpdateAsync } from './UpdateAsync.js';
-import Apps from './Apps';
-import tndView from './ndView';
-import trainbase from './trainbaseview';
-import howto from './howto';
-import menu from './menu';
-import News from './components/news.js';
-import TestArea from './TestArea.js';
-import Setting from './components/settings.js';
-import trainMenu from './components/trainMenu.js';
+import React, { useEffect, useRef } from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import {
+  createStackNavigator,
+  TransitionPresets,
+} from "@react-navigation/stack";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { AntDesign, Ionicons } from "@expo/vector-icons";
+import { ToastAndroid, Platform, UIManager } from "react-native";
+import { UpdateAsync } from "./UpdateAsync.js";
+import Apps from "./Apps";
+import tndView from "./ndView";
+import trainbase from "./trainbaseview";
+import howto from "./howto";
+import menu from "./menu";
+import News from "./components/news.js";
+import TestArea from "./TestArea.js";
+import Setting from "./components/settings.js";
+import trainMenu from "./components/trainMenu.js";
 const Stack = createStackNavigator();
 const Tab = createBottomTabNavigator();
-if (Platform.OS === 'android') {
+if (Platform.OS === "android") {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
   }
 }
-export default function App(){
+export default function App() {
   const navigationRef = useRef();
   var platform = Platform.OS === "android" ? 70 : 50;
-  useEffect(()=>UpdateAsync(),[])
-  return(
-      <NavigationContainer name= "Root"  ref={navigationRef} style={{flex:1}}>
-        <Tab.Navigator>
-          <Stack.Screen name="login"   component={top}  options={{ tabBarLabel: '位置情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<AntDesign name="barchart"  size={32} />),}}/>
-          <Stack.Screen name="menuPage"   component={menuPage}  options={{ tabBarLabel: 'リンク',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="ios-radio" size={32}/>),}}/>
-          <Stack.Screen name="home"   component={tndView}  options={{ tabBarLabel: '運行情報',headerTransparent:true,gestureEnabled:true,tabBarIcon: ({ color, size }) => (<Ionicons name="md-train" size={32}/>),}}/>
-          
-        </Tab.Navigator>
-      </NavigationContainer>
-    
-  )
+  useEffect(() => UpdateAsync(), []);
+  return (
+    <NavigationContainer name="Root" ref={navigationRef} style={{ flex: 1 }}>
+      <Tab.Navigator>
+        <Stack.Screen
+          name="login"
+          component={top}
+          options={{
+            tabBarLabel: "位置情報",
+            headerTransparent: true,
+            gestureEnabled: true,
+            tabBarIcon: ({ color, size }) => (
+              <AntDesign name="barchart" size={32} />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="menuPage"
+          component={menuPage}
+          options={{
+            tabBarLabel: "リンク",
+            headerTransparent: true,
+            gestureEnabled: true,
+            tabBarIcon: ({ color, size }) => (
+              <Ionicons name="ios-radio" size={32} />
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="home"
+          component={tndView}
+          options={{
+            tabBarLabel: "運行情報",
+            headerTransparent: true,
+            gestureEnabled: true,
+            tabBarIcon: ({ color, size }) => (
+              <Ionicons name="md-train" size={32} />
+            ),
+          }}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
 }
-function top(){
-  return(
+function top() {
+  return (
     <Stack.Navigator>
-      <Stack.Screen name="Apps"   component={Apps}  options={{headerShown: false,gestureEnabled:true,headerTransparent:true,}}/>
-      <Stack.Screen name="trainbase"   component={trainbase}  options={{ title: 'トレインビジョン',gestureEnabled:true,...TransitionPresets.SlideFromRightIOS}}/>
-      <Stack.Screen name="howto"   component={howto}  options={{ title: '使い方',gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}}/>
-      <Stack.Screen name="test"   component={TestArea} options={{}}/>
-      <Stack.Screen name="news" component={News} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
-      <Stack.Screen name="trainMenu" component={trainMenu} options={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
+      <Stack.Screen
+        name="Apps"
+        component={Apps}
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen
+        name="trainbase"
+        component={trainbase}
+        options={{
+          title: "トレインビジョン",
+          gestureEnabled: true,
+          ...TransitionPresets.SlideFromRightIOS,
+        }}
+      />
+      <Stack.Screen
+        name="howto"
+        component={howto}
+        options={{
+          title: "使い方",
+          gestureEnabled: true,
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen name="test" component={TestArea} options={{}} />
+      <Stack.Screen
+        name="news"
+        component={News}
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
+      <Stack.Screen
+        name="trainMenu"
+        component={trainMenu}
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
-  )
+  );
 }
-function menuPage(){
-  return(
+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={{gestureEnabled:true,...TransitionPresets.ModalPresentationIOS,cardOverlayEnabled:true,headerTransparent:true,headerShown:false}} />
+      <Stack.Screen
+        name="menu"
+        component={menu}
+        options={{
+          headerShown: false,
+          gestureEnabled: true,
+          headerTransparent: true,
+        }}
+      />
+      <Stack.Screen
+        name="setting"
+        component={Setting}
+        options={{
+          gestureEnabled: true,
+          ...TransitionPresets.ModalPresentationIOS,
+          cardOverlayEnabled: true,
+          headerTransparent: true,
+          headerShown: false,
+        }}
+      />
     </Stack.Navigator>
-  )
-}
+  );
+}