设置tab-icon为红色无效

来源：20-1 实战仿写小红书App-构建基础底部Tab

MC_inR067

2024-12-15

我的RN是0.76.3

然后我的视频中代码如下：

MainTab.tsx

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import React from "react";
import { StyleSheet, View, Text, Image } from "react-native";
import Home from "../home/Home";
import Shop from "../shop/Shop";
import Message from "../message/Message";
import Mine from "../mine/Mine";
import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';
import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';

import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';
import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';

import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';
import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';

import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';
import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';


const BottomTab = createBottomTabNavigator();

export default () => {
    return (
        <View style={rootStyles.root}>
            <BottomTab.Navigator
                screenOptions={({ route }) => {
                    return {
                        tabBarIcon: ({ focused, color, size }) => {
                            let img;
                            if (route.name == 'Home') {
                                img = focused ? icon_tab_home_selected : icon_tab_home_normal;
                            } else if (route.name == 'Shop') {
                                img = focused ? icon_tab_shop_selected : icon_tab_shop_normal;
                            } else if (route.name == 'Message') {
                                img = focused ? icon_tab_message_selected : icon_tab_message_normal;
                            } else if (route.name == 'Mine') {
                                img = focused ? icon_tab_mine_selected : icon_tab_mine_normal;
                            }
                            return <Image source={img} style={{
                                width: size,
                                height: size,
                                tintColor: color,
                            }} />
                        }
                    }
                }}
                // @ts-ignore
                tabBarOptions={{
                    activeTintColor: '#ff2442',
                    inactiveTintColor: '#999',
                }}
            >
                <BottomTab.Screen
                    name="Home"
                    component={Home}
                    options={{
                        title: '首页',

                    }}
                />
                <BottomTab.Screen
                    name="Shop"
                    component={Shop}
                    options={{
                        title: '购物',


                    }}
                />
                <BottomTab.Screen
                    name="Message"
                    component={Message}
                    options={{
                        title: '消息',


                    }}
                />
                <BottomTab.Screen
                    name="Mine"
                    component={Mine}
                    options={{
                        title: '我',


                    }}
                />
            </BottomTab.Navigator>
        </View>
    );
}

const rootStyles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
    },
});

也就是

// @ts-ignore
tabBarOptions={{
    activeTintColor: '#ff2442',
    inactiveTintColor: '#999',
}}

预期效果：和视频中一样，tab——icon可以变化颜色，比如设置的红色。

实际效果：无反应

可能是RN版本问题，不太确定

写回答

1回答

好帮手慕小李

2025-02-12

不出意外大概率就是版本的问题，（React Native 0.76.3 中，tabBarOptions 已经被废弃，取而代之的是 screenOptions 和 tabBar 的配置。）尝试如下：

tabBarOptions 的配置移动到 screenOptions 中，并确保使用正确的属性。以下是修改后的代码：

tsx

import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";import React from "react";import { StyleSheet, View, Text, Image } from "react-native";import Home from "../home/Home";import Shop from "../shop/Shop";import Message from "../message/Message";import Mine from "../mine/Mine";import icon_tab_home_normal from '../../assets/icon_tab_home_normal.png';import icon_tab_home_selected from '../../assets/icon_tab_home_selected.png';import icon_tab_shop_normal from '../../assets/icon_tab_shop_normal.png';import icon_tab_shop_selected from '../../assets/icon_tab_shop_selected.png';import icon_tab_message_normal from '../../assets/icon_tab_message_normal.png';import icon_tab_message_selected from '../../assets/icon_tab_message_selected.png';import icon_tab_mine_normal from '../../assets/icon_tab_mine_normal.png';import icon_tab_mine_selected from '../../assets/icon_tab_mine_selected.png';const BottomTab = createBottomTabNavigator();export default () => {
    return (
        <View style={rootStyles.root}>
            <BottomTab.Navigator
                screenOptions={({ route }) => {
                    return {
                        tabBarIcon: ({ focused, color, size }) => {
                            let img;
                            if (route.name == 'Home') {
                                img = focused ? icon_tab_home_selected : icon_tab_home_normal;
                            } else if (route.name == 'Shop') {
                                img = focused ? icon_tab_shop_selected : icon_tab_shop_normal;
                            } else if (route.name == 'Message') {
                                img = focused ? icon_tab_message_selected : icon_tab_message_normal;
                            } else if (route.name == 'Mine') {
                                img = focused ? icon_tab_mine_selected : icon_tab_mine_normal;
                            }
                            return <Image source={img} style={{
                                width: size,
                                height: size,
                                tintColor: color,
                            }} />
                        },
                        tabBarActiveTintColor: '#ff2442',
                        tabBarInactiveTintColor: '#999',
                    };
                }}
            >                <BottomTab.Screen
                    name="Home"
                    component={Home}
                    options={{
                        title: '首页',
                    }}
                />
                <BottomTab.Screen
                    name="Shop"
                    component={Shop}
                    options={{
                        title: '购物',
                    }}
                />
                <BottomTab.Screen
                    name="Message"
                    component={Message}
                    options={{
                        title: '消息',
                    }}
                />
                <BottomTab.Screen
                    name="Mine"
                    component={Mine}
                    options={{
                        title: '我',
                    }}
                />
            </BottomTab.Navigator>
        </View>
    );}const rootStyles = StyleSheet.create({
    root: {
        width: '100%',
        height: '100%',
    },});

RN从0到1系统精讲与小红书APP实战

30+小案例+2个实战项目，快人一步提升个职业竞争力

295 学习 · 211 问题

查看课程

相似问题

连接真机，震动权限失效，怎么弄，

回答 2

LayoutAnimation在安卓上无效

回答 4

侧拉菜单怎么从右边弹出

回答 1

selectable 设置不生效

回答 2

selectable selectionColor 设置后怎么同步设置文本颜色

回答 1

打开慕课网App查看更多内容