React Native Expo Router 选项卡:如何设置选项卡名称和图标?

问题描述 投票:0回答:2

我在我的 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 设备上显示的 2 个选项卡按钮的标题是

foo
bar
,而不是
Foo
Bar

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

另外,有没有办法重新排列选项卡按钮的顺序?例如显示

[ Foo | Bar ]
而不是
[ Bar | Foo ]
。谢谢!

javascript reactjs react-native expo react-navigation
2个回答
0
投票

name
属性将被显示。因此,您需要将其更改为您想要显示的内容。


0
投票

对于图标:- 您可以使用“react-native-vector-icons”库来使用图标。库链接 [https://www.npmjs.com/package/react-native-vector-icons] 或者您可以关注此视频以获得相同的 [https://www.youtube.com/watch?v=gkjYTapyEO8&ab_channel=Arslan]

标题:- 无论您在组件的 name prop 中给出什么名称,都将显示在标签栏中。 我用过 [https://reactnavigation.org/docs/tab-based-navigation/][1] 用于标签导航。

import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/Ionicons';

export default function Layout() {
  const Tab = createBottomTabNavigator();
  return (
    <Tab.Navigator
      screenOptions={({route}) => ({
        tabBarIcon: ({focused, size}) => {
          let iconName;
          if (route.name === 'Foo') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Bar') {
            iconName = focused ? 'basketball' : 'basketball-outline';
          }
          return <Icon name={iconName} size={size} color={'pink'} />;
        },
        tabBarLabelStyle: {
          color: 'pink',
        },
        tabBarStyle: {
          backgroundColor: 'black',
        },
      })}>
      <Tab.Screen name="Foo" component={'You Component Name'} />
      <Tab.Screen name="Bar" component={'You Component Name'} />
    </Tab.Navigator>
  );
}
© www.soinside.com 2019 - 2024. All rights reserved.