如何在 React-native 中更改样式可滚动选项卡答案

【问题标题】：How to change style scrollable tab in React-native如何在 React-native 中更改样式可滚动选项卡
【发布时间】：2017-08-08 10:48:16
【问题描述】：

我在我的项目中使用 Native-Bae，并且已经为可滚动选项卡添加了这些样式元素，但它并没有根据我的需要更改颜色。这是我的代码。

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

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

它显示默认蓝色，而我需要将下划线颜色、活动文本颜色更改为绿色、将非活动文本颜色更改为灰色。

【问题讨论】：

标签： reactjs react-native react-native-android react-native-ios native-base

【解决方案1】：

我已经尝试了您的代码，并得到了这个解决方案，首先是更改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>

希望能帮到你，如有错误请通知我，谢谢:)

【讨论】：

感谢您的帮助。此代码有效。你知道有什么方法可以使用边框而不是制表符下划线吗？我问它是因为标签下划线就像边框底部一样。
我认为你可以在标签本机基础中使用其他属性
以上代码用于更改颜色。非常感谢。
不客气 :) 如果您觉得我的回答可以帮助您解决问题，您可以将我的回答标记为已检查，以便其他人也可以尝试我的代码 :)