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

Question

我是 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 不会更改背景颜色。我希望那个蓝色圆圈是另一种颜色。

Answer 1

首先获得一个分支形式 this，然后获得一个克隆，进行必要的更改并推送它。

一切顺利，现在您可以将它安装到您的应用程序中了

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

Answer 2

属性 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 中的自述文件，那么您会发现 tintColor 不仅适用于选项卡项，而且适用于 TabBar 组件本身。所以，如果你设置 <TabBat tintColor="red" ... 你会像这样为气泡设置红色：

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

How to change the style of an external React Native module

css

external

node-modules

reactjs

react-native