React Native Expo Router Tabs：如何设置选项卡名称和图标？

Question

我在我的 React Native expo 应用程序中使用expo-router，我的文件是

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 (main)\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _layout.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _foo.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _bar.js\n

\n

layout.js

\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 app\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 (main)\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _layout.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _foo.js\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 _bar.js\n

\n

但是，我的 iOS 设备上显示的 2 个选项卡按钮有标题foo和bar而不是Foo和Bar。

\n

设置选项卡按钮名称的正确方法是什么？

\n

另外，有没有办法重新排列选项卡按钮的顺序？例如显示[ Foo | Bar ]而不是[ Bar | Foo ]. 谢谢！

\n

Answer 1

只需将 screenOptions 更改为 options 即可。和 tabBarLabel 的标题

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={{ tabBarLabel: "Foo" }} />
          <Tabs.Screen name="bar" options={{ tabBarLabel: "Bar" }} />
        </Tabs>
      </SafeAreaProvider>
    );
  }