tab.ts

2024-06-01  本文已影响0人  太平洋_cfd2

import React from 'react'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import User from '../User/index'
import UploadImage from '../UploadImage'
import { Image } from 'react-native'
import { pxToVw } from '../../utils/pxToVx'

const Tab = createBottomTabNavigator()
const TabScreen: React.FC<{}> = props => {
return (
<Tab.Navigator
screenOptions={{
headerShown: false,
tabBarInactiveBackgroundColor: '#f1f1ef',
tabBarActiveBackgroundColor: '#f1f1ef',
}}
>
<Tab.Screen
name="UploadImage"
component={UploadImage}
options={{
// title: '首页',
tabBarLabel: '首页',
tabBarActiveTintColor: 'black',
tabBarIcon: ({ focused, color, size }) => {
// <MaterialCommunityIcons name="home" color={color} size={size}
return (
<Image
source={
focused
? require('../../asset/images/icon_create_active.png')
: require('../../asset/images/icon_create.png')
}
></Image>
)
},
}}
/>
<Tab.Screen
name="User"
component={User}
options={{
// title: '我的',
tabBarLabel: '我的',
tabBarLabelStyle: {
// fontSize: pxToVw(12),
// color: 'gray',
},

      tabBarActiveTintColor: 'black',
      tabBarIcon: ({ focused, color, size }) => {
        // <MaterialCommunityIcons name="home" color={color} size={size}
        return (
          <Image
            source={
              focused
                ? require('../../asset/images/icon_mine_active.png')
                : require('../../asset/images/icon_mine.png')
            }
          ></Image>
        )
      },
    }}
  />
</Tab.Navigator>

)
}
export default TabScreen

上一篇下一篇

猜你喜欢

热点阅读