56 lines
2.2 KiB
TypeScript
56 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Text } from 'react-native';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { SafeAreaProvider } from 'react-native-safe-area-context';
|
|
import HomeScreen from './screens/HomeScreen';
|
|
import MessageScreen from './screens/MessageScreen';
|
|
|
|
const Tab = createBottomTabNavigator();
|
|
|
|
export default function App() {
|
|
return (
|
|
<SafeAreaProvider>
|
|
<NavigationContainer>
|
|
<Tab.Navigator
|
|
screenOptions={{
|
|
tabBarActiveTintColor: '#3498db',
|
|
tabBarInactiveTintColor: '#999',
|
|
tabBarStyle: {
|
|
backgroundColor: '#fff',
|
|
borderTopWidth: 1,
|
|
borderTopColor: '#e0e0e0',
|
|
},
|
|
headerStyle: { backgroundColor: '#3498db' },
|
|
headerTintColor: '#fff',
|
|
headerTitleStyle: { fontWeight: 'bold' },
|
|
}}
|
|
>
|
|
<Tab.Screen
|
|
name="Home"
|
|
component={HomeScreen}
|
|
options={{
|
|
title: '首页',
|
|
tabBarLabel: '首页',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Text style={{ fontSize: size, color }}>🏠</Text>
|
|
),
|
|
}}
|
|
/>
|
|
<Tab.Screen
|
|
name="Message"
|
|
component={MessageScreen}
|
|
options={{
|
|
title: '消息',
|
|
tabBarLabel: '消息',
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Text style={{ fontSize: size, color }}>💬</Text>
|
|
),
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
</SafeAreaProvider>
|
|
);
|
|
}
|