Как изменить стиль прокручиваемой вкладки в React-native

Я использую Native-Bae в своем проекте и уже добавил эти элементы стиля для прокручиваемой вкладки, но он не меняет цвет, как мне нужно. Вот мой код.

<Tabs styles={{tabBarUnderlineStyle:'#0dc49d',tabBarActiveTextColor:'#0dc49d',tabBarInactiveTextColor:'#D3D3D3'}} >

   <Tab  heading="Most Popular">
     <Articles />
   </Tab>
   <Tab heading="New">
     <ArticlesNew />
   </Tab>
 </Tabs>

It shows default blue color while I need to change underline color, active text color to green and inactive text color to gray.


react-native reactjs react-native-ios react-native-android native-base
person NewTech Lover    schedule 08.08.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я попробовал ваш код и получил это решение, сначала измените свойства вашего Tabs, если вы хотите изменить стиль подчеркивания:

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

а затем измените свойства стиля вашей вкладки с помощью этого кода:

<Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >

и ваш полный код должен быть таким:

<Tabs tabBarUnderlineStyle={{ backgroundColor:'#0dc49d' }} >

   <Tab  heading="Most Popular" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <Articles />
   </Tab>
   <Tab heading="New" activeTextStyle={{ color:'#0dc49d' }} textStyle={{ color:'grey' }} >
     <ArticlesNew />
   </Tab>
 </Tabs>

Надеюсь, что может помочь в вашей проблеме, пожалуйста, обратите внимание на меня, если у вас есть ошибка, спасибо :)

person Rizal Sidik    schedule 08.08.2017
comment
Спасибо за вашу помощь. Этот код работает. Вы знаете, есть ли способ использовать рамку вместо подчеркивания табуляции? Я спрашиваю об этом, потому что подчеркивание вкладки похоже только на нижнюю границу. - person NewTech Lover; 08.08.2017
comment
вы можете использовать другие свойства в собственной базе вкладок, я думаю - person Rizal Sidik; 09.08.2017
comment
Приведенный выше код работал для изменения цвета. Большое спасибо. - person NewTech Lover; 10.08.2017
comment
пожалуйста :) если вы чувствуете, что мой ответ помогает вам решить вашу проблему, вы можете отметить мой ответ как отмеченный, чтобы другие люди тоже могли попробовать мой код :) - person Rizal Sidik; 10.08.2017