jrshikoku/App.js
2022-04-14 03:10:12 +09:00

57 lines
3.1 KiB
JavaScript

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';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();
if (Platform.OS === 'android') {
if (UIManager.setLayoutAnimationEnabledExperimental) {
UIManager.setLayoutAnimationEnabledExperimental(true);
}
}
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={platform}/>),}}/>
<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(
<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.Navigator>
)
}
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.Navigator>
)
}