Question

有什么方法可以动态设置新的标签栏图标和颜色？在我的应用中，我希望在收到新消息时将“聊天”选项卡的图标更改为红色。

重现步骤/代码段/屏幕截图

    this.props.navigator.setTabButton(
        {
                tabIndex: 2,
                screen: 'parkour.ChatListScreen',
                title: 'Chat',
                icon: iconsMap[2],
                style: { color: 'red' }
        },

style属性根本不起作用，结果颜色为黄色。

我使用React Native导航v.1。

Answer 1

在createBottomTabNavigator的navigationOption中添加TabIcon组件使用redux或上下文api更改TabIconComponent的状态。

        try
        {
            RemoveRecordsWithSameName();
        }
        catch (SqlException ex)
        {
             if (ex.Errors.Count > 0) // Assume the interesting stuff is in the first error
            {
             switch (ex.Errors[0].Number)
            {
            case 547: // Foreign Key violation but you have to check number
                MakeRecordsWithSameNameInActive();
                break;               
            default:
                throw new DataAccessException(ex);
            }
            }

        }          
        catch(Exception ex)
        {
          //process regular exception
        }

Answer 2

在v1中无法更新BottomTabs项目，但在v2中应该可以。

即使您使用的是v1，我也会为v2发布解决方案：

Navigation.mergeOptions(this.props.componentId, {
  bottomTab: {
    color: 'red',
    icon: require('./someOtherIcon.png')
  }
});

this.props.compoenntId是根屏幕的componentId。您可以在声明布局时为屏幕提供预定义的ID，并使用该预定义的ID。

在react-native-navigation中设置标签栏图标的颜色

2 个答案: