React native - styles选项卡导航器

Question

我想为我的标签导航器添加自定义样式。我已经尝试使用style:{}内screenOptions但是这些风格不管用。只有内置的样式道具才能工作。下面是我的代码:

import React from "react";
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from './Home'
import Create from './Create'
import Messages from './Messages'
import Forum from './Forum'
import Profile from './Profile'
import LottieView from "lottie-react-native";
import Icon from 'react-native-vector-icons/Feather';
const Tabs = createBottomTabNavigator();
export default function App() {
return (
<Tabs.Navigator
screenOptions={({ route }) => ({
tabBarShowLabel: false,
tabBarHideOnKeyboard: true,
style: {
borderRadius: 15,
height: 90,
},
tabBarIcon: ({ focused, color, size }) => {
let iconName;
switch (route.name) {
case 'Home':
iconName = 'home';
break;
case 'Messages':
iconName = 'message-circle';
break;
case 'Create':
iconName = 'home';
break;
case 'Forum':
iconName = 'activity';
break;
case 'Profile':
iconName = 'user';
break;
default:
break;
}
// return <Ionicons name={iconName} size={size} color={color} />;
// return <LottieView source={filePath} loop={false} autoPlay={focused} />;
return <Icon name={iconName} color={color} size={24} />;
},
})}
>
<Tabs.Screen name="Home" component={Home} />
<Tabs.Screen name="Messages" component={Messages} />
<Tabs.Screen name="Create" component={Create} />
<Tabs.Screen name="Forum" component={Forum} />
<Tabs.Screen name="Profile" component={Profile} />
</Tabs.Navigator>
);
}

是否有另一种方式来设置样式。任何帮助都会很感激。提前谢谢。

Answer 1

如果您想更改Bottom Navigation的样式，请使用tabBarStyle或tabBarItemStyle而不是style。

const screenOptions = {
tabBarStyle:{
backgroundColor:'#0000ff',
height:100,
},
tabBarItemStyle:{
backgroundColor:'#00ff00',
margin:5,
borderRadius:10,
}
};

<Tab.Navigator {...{ screenOptions }}>

裁判:https://snack.expo.dev/@fanish native-stack-navigator - % 7 c-react-navigation

Answer 2

如果你想使用自定义标签栏，请使用标签栏道具。

<Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
{...}
</Tab.Navigator>