96 lines
3.0 KiB
TypeScript
96 lines
3.0 KiB
TypeScript
import * as React from 'react';
|
|
import { useEffect } from 'react';
|
|
import { NavigationContainer } from '@react-navigation/native';
|
|
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
|
|
import { View, StyleSheet, Image, Platform } from 'react-native';
|
|
import ShopScreens from './src/views/ShopScreen';
|
|
import ProfileScreens from './src/views/ProfileScreen';
|
|
import 'react-native-gesture-handler';
|
|
import { enableScreens } from 'react-native-screens';
|
|
import HomeStackNavigator from './src/views/HomeStackNavigator';
|
|
import { getFocusedRouteNameFromRoute } from '@react-navigation/native';
|
|
import { rpx } from './src/utils/rpx';
|
|
import { AMapSdk, MapView, Marker, MapType } from 'react-native-amap3d';
|
|
enableScreens();
|
|
|
|
type RootStackParamList = {
|
|
'爱车': undefined;
|
|
'商城': undefined;
|
|
'个人中心': undefined;
|
|
};
|
|
|
|
const Tab = createBottomTabNavigator<RootStackParamList>();
|
|
|
|
function App() {
|
|
useEffect(() => {
|
|
AMapSdk.init(
|
|
Platform.select({
|
|
android: "812efd3a950ba3675f928630302c6463",
|
|
})
|
|
);
|
|
}, []);
|
|
|
|
const getTabBarVisibility = (route: any) => {
|
|
const routeName = getFocusedRouteNameFromRoute(route) ?? 'Home';
|
|
const showOnScreens = ['Home']; // 只在 Home 页面显示底部导航栏
|
|
return showOnScreens.includes(routeName) ? 'flex' : 'none';
|
|
};
|
|
return (
|
|
<NavigationContainer>
|
|
<Tab.Navigator screenOptions={{ headerShown: false }}>
|
|
<Tab.Screen
|
|
name="爱车"
|
|
component={HomeStackNavigator}
|
|
options={({ route }) => ({
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Image
|
|
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/unny4QdTukoNl8fZYtkf' }}
|
|
style={{ width: size, height: size, tintColor: color,paddingBottom:rpx(10) }}
|
|
resizeMode="contain"
|
|
/>
|
|
),
|
|
tabBarStyle: {
|
|
display: getTabBarVisibility(route)
|
|
}
|
|
})}
|
|
/>
|
|
{/* <Tab.Screen
|
|
name="商城"
|
|
component={ShopScreens}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Image
|
|
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uqJNRvkwMS4ndouxoYlX' }}
|
|
style={{ width: size, height: size, tintColor: color }}
|
|
resizeMode="contain"
|
|
/>
|
|
),
|
|
}}
|
|
/> */}
|
|
<Tab.Screen
|
|
name="个人中心"
|
|
component={ProfileScreens}
|
|
options={{
|
|
tabBarIcon: ({ color, size }) => (
|
|
<Image
|
|
source={{ uri: 'https://lxnapi.ccttiot.com/bike/img/static/uroSSfFVSob2kEvqTaD4' }}
|
|
style={{ width: size, height: size, tintColor: color }}
|
|
resizeMode="contain"
|
|
/>
|
|
),
|
|
}}
|
|
/>
|
|
</Tab.Navigator>
|
|
</NavigationContainer>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
},
|
|
});
|
|
|
|
export default App; |