时间戳

首页 > 解决方案 > 如何更改外部 React Native 模块的样式

css - 如何更改外部 React Native 模块的样式

问题描述

我是 React Native 的新手，我正在为 TabBar 使用这个存储库。

我可以改变一些风格吗？默认情况下，气泡背景是蓝色的，我想将其更改为其他颜色。

在backgroundColorindex.js下node_modules/react-native-fluidbottomnavigation定义为#4C53DD.

我可以从使用 TabBar 的那一刻开始更改它吗？

这是我的导航栏：

标签栏

这是我的代码App.js：

<TabBar
          onPress={tabIndex => {
            console.log(tabIndex);
            curTab = tabIndex;
          }}
          values={[
            {
              title: 'requests',
              image: require('./assets/requests.png'),
              tintColor: 'red',
            },
            {
              title: 'requests',
              image: require('./assets/requests.png'),
              tintColor: 'blue',
            },
            {
              title: 'events',
              image: require('./assets/events.png'),
              default: true,
              tintColor: 'green',
            },
            {
              title: 'members',
              image: require('./assets/members.png'),
              tintColor: 'orange',
            },
            {
              title: 'account',
              image: require('./assets/account.png'),
              tintColor: 'yellow',
            },
          ]}
        />

正如您在图片中看到的那样，此 tintColor 不会更改背景颜色。我希望那个蓝色圆圈是另一种颜色。

标签： cssreactjsreact-nativenode-modulesexternal

解决方案

有一个属性tintColor可以用于这两个TabBar和每个项目，如下所示：

import TabBar, { iconTypes } from "react-native-fluidbottomnavigation";

<TabBar
    iconStyle={{ width: 50, height: 50 }}

    // CHANGE TINT COLOR HERE ---------------

    tintColor="red" // Change tint color here

    // --------------------------------------

    onPress={(tabIndex) => {
        console.warn(tabIndex);
    }}
    isRtl={ true }
    iconSize={25}
    values={[
        { title: "Home", icon: "alarm", tintColor: curTab == 0 ? "red" : "blue", default: true, isIcon: true, iconType: iconTypes.MaterialIcons },
        { title: "Home1", tintColor: curTab == 1 ? "red" : "blue", },
        { title: "Home2", tintColor: curTab == 2 ? "red" : "blue", },
        { title: "Home3", tintColor: curTab == 3 ? "red" : "blue", },
        { title: "Home4", tintColor: curTab == 4 ? "red" : "blue", },
    ]}
/>

如果您更仔细地阅读我的回答和 repo 中的 README，那么您会发现它tintColor不仅适用于选项卡项，还适用于TabBar组件本身。所以，如果你设置<TabBat tintColor="red" ...你会像这样为气泡设置红色：

react-native-fluidbottomnavigation

推荐阅读