我在我的 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 ]
。谢谢!
name
属性将被显示。因此,您需要将其更改为您想要显示的内容。
对于图标:- 您可以使用“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>
);
}