React Native Expo Router Tabs：设置标签名称、图标及调整排序

问题背景 #

在React Native Expo项目中使用expo-router，项目文件结构如下：

├── app
│   ├── (main)
│   └── _layout.js
│   └── _foo.js
│   └── _bar.js

当前_layout.js代码如下：

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen name="foo" screenOptions={{ title: "Foo" }} />
          <Tabs.Screen name="bar" screenOptions={{ title: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }

遇到的问题：iOS设备上标签按钮标题仍显示foo和bar，而非设置的Foo和Bar；同时需要调整标签顺序、设置标签图标。

1. 标签标题不生效的解决方法 #

核心问题是属性名称错误：Tabs.Screen的标题配置应使用options属性，而非screenOptions（screenOptions是<Tabs>组件的全局配置属性）。

修正后的代码：

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen name="foo" options={{ title: "Foo" }} />
          <Tabs.Screen name="bar" options={{ title: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }

如果需要细粒度控制标签栏文字（比如区分选中/未选中状态），可以在options里配置tabBarLabel：

<Tabs.Screen 
  name="foo" 
  options={{ 
    tabBarLabel: ({ focused }) => focused ? "Foo" : "foo"
  }} 
/>

2. 调整标签按钮顺序 #

标签的显示顺序完全由<Tabs>组件下<Tabs.Screen>的书写顺序决定。想要显示[ Foo | Bar ]，只需保证foo对应的Tabs.Screen写在bar之前即可，如上面修正后的代码所示。

3. 设置标签图标 #

使用@expo/vector-icons库来设置标签图标，步骤如下：

第一步：安装依赖 #

npx expo install @expo/vector-icons

第二步：在_layout.js中配置图标 #

以Ionicons为例，代码示例：

import { Tabs } from "expo-router";
import { SafeAreaProvider } from "react-native-safe-area-context";
import Ionicons from '@expo/vector-icons/Ionicons';

export default function Layout() {
    return (
      <SafeAreaProvider>
        <Tabs>
          <Tabs.Screen 
            name="foo" 
            options={{ 
              title: "Foo",
              // 配置标签图标
              tabBarIcon: ({ focused, color, size }) => (
                <Ionicons 
                  name={focused ? 'home' : 'home-outline'} 
                  color={color} 
                  size={size} 
                />
              )
            }} 
          />
          <Tabs.Screen 
            name="bar" 
            options={{ 
              title: "Bar",
              tabBarIcon: ({ focused, color, size }) => (
                <Ionicons 
                  name={focused ? 'settings' : 'settings-outline'} 
                  color={color} 
                  size={size} 
                />
              )
            }} 
          />
        </Tabs>
      </SafeAreaProvider>
    );
  }

tabBarIcon是一个函数，接收三个参数：

• focused：当前标签是否被选中
• color：标签栏的默认颜色（由全局配置或系统主题决定）
• size：图标的默认尺寸

你可以根据需求更换图标库（如FontAwesome、MaterialIcons等）和图标名称。

内容的提问来源于stack exchange，提问作者gameveloster