如何在expo-router的Tabs中垂直居中图标？

Question

如何在expo-router的Tabs中垂直居中图标？

新手上路，请多包涵

为什么图标没有垂直居中呢？

import React from 'react'
import { Tabs } from 'expo-router'
import AntDesign from '@expo/vector-icons/AntDesign'

const Layout = () => {
  return (
    <Tabs
      screenOptions={{
        tabBarShowLabel: false,
        tabBarStyle: {
          height: 60
        }
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: 'Index',
          tabBarIcon: ({ color }) => (
            <AntDesign name="home" size={26} color={color} />
          )
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color }) => (
            <AntDesign name="eyeo" size={26} color={color} />
          )
        }}
      />
      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => (
            <AntDesign name="user" size={26} color={color} />
          )
        }}
      />
    </Tabs>
  )
}

export default Layout

在web上反而是正常的

expo react-native

阅读 195

AI BotBETA

### 如何在expo-router的Tabs中垂直居中图标？

图标没有垂直居中可能是由于 `expo-router` 的 `Tabs` 组件默认的样式设置没有考虑到图标的垂直对齐。你可以通过自定义 `tabBarIconStyle` 来实现图标的垂直居中。

在 `Tabs.Screen` 的 `options` 中添加 `tabBarIconStyle` 属性，并使用 Flexbox 布局来垂直居中图标。例如：

import React from 'react';
import { Tabs } from 'expo-router';
import AntDesign from '@expo/vector-icons/AntDesign';

const Layout = () => {
return (

<Tabs
  screenOptions={{
    tabBarShowLabel: false,
    tabBarStyle: {
      height: 60,
      display: 'flex',
      alignItems: 'center', // 确保容器内的项目垂直居中
      justifyContent: 'center' // 确保容器内的项目水平居中（虽然这里主要是垂直居中）
    }
  }}
>
  <Tabs.Screen
    name="index"
    options={{
      title: 'Index',
      tabBarIcon: ({ color }) => (
        <AntDesign name="home" size={26} color={color} style={{ alignSelf: 'center' }} />
      ),
      tabBarIconStyle: {
        alignSelf: 'center' // 强制图标垂直居中
      }
    }}
  />
  <Tabs.Screen
    name="explore"
    options={{
      title: 'Explore',
      tabBarIcon: ({ color }) => (
        <AntDesign name="eyeo" size={26} color={color} style={{ alignSelf: 'center' }} />
      ),
      tabBarIconStyle: {
        alignSelf: 'center'
      }
    }}
  />
  <Tabs.Screen
    name="profile"
    options={{
      title: 'Profile',
      tabBarIcon: ({ color }) => (
        <AntDesign name="user" size={26} color={color} style={{ alignSelf: 'center' }} />
      ),
      tabBarIconStyle: {
        alignSelf: 'center'
      }
    }}
  />
</Tabs>

);
}

export default Layout;


### 为什么图标没有垂直居中呢？

图标没有垂直居中可能是因为 `expo-router` 的 `Tabs` 组件内部的布局默认没有为图标提供足够的样式来确保其在父容器内垂直居中。在原生开发中，尤其是跨平台开发（如 React Native），不同的平台（iOS、Android、Web）可能会有不同的默认样式和布局行为。因此，显式地设置样式（如 `alignSelf: 'center'`）通常是必要的，以确保在所有平台上有一致的视觉表现。

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进