Как изменить стиль внешнего модуля React Native - PullRequest
Новая
       24

Как изменить стиль внешнего модуля React Native

0 голосов
/ 22 февраля 2020

Я новичок в React Native и использую этот репозиторий для TabBar.

Могу ли я изменить некоторые стили? По умолчанию пузырьковый фон имеет синий цвет, и я хочу изменить его на что-то другое.

В index.js в node_modules/react-native-fluidbottomnavigation backgroundColor определяется как #4C53DD.

Могу ли я изменить его с того момента, как использую TabBar?

Это мой NavBar:

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 не меняет цвет фона, как вы можете видеть на картинке. Я хочу, чтобы этот синий круг был другого цвета.

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Существует свойство 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", },
    ]}
/>

Если вы внимательно прочитаете мой ответ и README в репо, то вы Вы увидите, что tintColor относится не только к элементам вкладок, но и к самому компоненту TabBar . Итак, если вы установите <TabBat tintColor="red" ..., у вас будет красный цвет для пузыря:

react-native-fluidbottomnavigation

0 голосов
/ 22 февраля 2020

Сначала получите форму форка этого , затем получите клона, сделайте необходимые изменения и сделайте это sh.

Все хорошо, теперь вы можете установить его в свое приложение 

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