tab.ts

作者: 太平洋_cfd2 | 来源:发表于2024-06-01 22:36 被阅读0次

    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

    相关文章

      网友评论

          本文标题:tab.ts

          本文链接:https://www.haomeiwen.com/subject/pwvjqjtx.html