React Native-Styling 选项卡导航器

Question

我想为我的选项卡导航器添加自定义样式。我试过在 screenOptions 中使用 style:{} 但样式不起作用。只有内置的样式道具才有效。这是我的代码：

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-%7C-react-navigation

Answer 2

如果您想使用自定义标签栏，请使用 tabBar 属性。

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

React Native-Styling 选项卡导航器

React Native-Styling Tab Navigator

react-native

react-native-stylesheet

react-navigation-bottom-tab