如何更改外部 React Native 模块的样式答案

【问题标题】：How to change the style of an external React Native module如何更改外部 React Native 模块的样式
【发布时间】：2020-06-06 17:13:26
【问题描述】：

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

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

在node_modules/react-native-fluidbottomnavigation 下的index.js 中，backgroundColor 定义为#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 不会更改您在图片中看到的背景颜色。我希望那个蓝色圆圈是另一种颜色。

【问题讨论】：

如果你去FluidBottomNavigation for React Native README 页面，有一个如何使用它的例子。在那里，您将看到TabBar 的哪些属性及其支持的项目，其中还有tintColor 用于TabBar 和可用于更改颜色的项目。无需分叉和更改任何 Github 存储库。当组件更新时你会做什么？你每次都会重新定义你的仓库吗？
tintColor 改变字体颜色而不是背景颜色

标签： css reactjs react-native node-modules external

【解决方案1】：

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" ...，你会得到像这样的红色气泡：

【讨论】：

tintColor 改变字体颜色而不是背景颜色
@Soteri 检查第 230 行的代码 here，您会看到 styles.bubble 和 styles.miniBubble 都具有 backgroundColor: "#4C53DD" 扩展 backgroundColor: this.props.tintColor。你错了。您是否尝试更改色调？您能否在源代码中指出tintColor 仅影响字体颜色的位置？
请看我问题的变化
@Soteri 我说的是更改TabBar 组件的tintColor，而不是项目。请查看我更新的答案和我制作的屏幕截图。

【解决方案2】：

首先获取一个 fork 表单 this，然后获取一个克隆，进行必要的更改并推送它。

现在一切顺利，您可以将其安装到您的应用中

npm install --save <git-url-of-your-fork>

【讨论】：