h-1.flutter.0/react_native_app/App.tsx

133 lines
3.1 KiB
TypeScript

// Version: 2026-02-15
/**
* Main App Entry Point
* Basic navigation setup
*/
import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, ActivityIndicator } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { initDatabase } from './src/services/database';
const Tab = createBottomTabNavigator();
// Placeholder screens
const HomeScreen = () => (
<View style={styles.screen}>
<Text style={styles.title}></Text>
<Text style={styles.subtitle}>1 v2.0.0</Text>
<Text style={styles.info}>React Native (Expo) </Text>
</View>
);
const CreateScreen = () => (
<View style={styles.screen}>
<Text style={styles.title}></Text>
<Text style={styles.subtitle}>Coming Soon...</Text>
</View>
);
const SettingsScreen = () => (
<View style={styles.screen}>
<Text style={styles.title}></Text>
<Text style={styles.subtitle}>Coming Soon...</Text>
</View>
);
export default function App() {
const [isReady, setIsReady] = useState(false);
useEffect(() => {
const initialize = async () => {
try {
await initDatabase();
console.log('Database initialized successfully');
} catch (error) {
console.error('Failed to initialize database:', error);
} finally {
setIsReady(true);
}
};
initialize();
}, []);
if (!isReady) {
return (
<View style={styles.loading}>
<ActivityIndicator size="large" color="#607D8B" />
<Text style={styles.loadingText}>...</Text>
</View>
);
}
return (
<NavigationContainer>
<Tab.Navigator
screenOptions={{
tabBarActiveTintColor: '#607D8B',
tabBarInactiveTintColor: '#999',
headerStyle: {
backgroundColor: '#607D8B',
},
headerTintColor: '#fff',
}}
>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{ title: '履歴' }}
/>
<Tab.Screen
name="Create"
component={CreateScreen}
options={{ title: '新規作成' }}
/>
<Tab.Screen
name="Settings"
component={SettingsScreen}
options={{ title: '設定' }}
/>
</Tab.Navigator>
<StatusBar style="auto" />
</NavigationContainer>
);
}
const styles = StyleSheet.create({
loading: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
loadingText: {
marginTop: 16,
fontSize: 16,
color: '#666',
},
screen: {
flex: 1,
backgroundColor: '#f5f5f5',
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 24,
fontWeight: 'bold',
marginBottom: 8,
color: '#333',
},
subtitle: {
fontSize: 16,
color: '#666',
marginBottom: 4,
},
info: {
fontSize: 14,
color: '#999',
},
});