React Native-Styling Tab Navigator答案

【问题标题】：React Native-Styling Tab NavigatorReact Native-Styling Tab Navigator
【发布时间】：2021-09-22 12:15:52
【问题描述】：

我想将自定义样式添加到我的标签导航器。我尝试在 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>
    );
}

是否有另一种方式来设置它的样式。任何帮助，将不胜感激。提前致谢。

【问题讨论】：

标签： react-native react-navigation-bottom-tab react-native-stylesheet

【解决方案1】：

如果您想更改 Bottom Navigation 的样式，请在 screenOptions 中使用 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

【讨论】：

【解决方案2】：

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

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

【讨论】：