Question

使用原生base和style = {{backgroundColor：“red”}}无法在标签中无法更改背景颜色如何更改标签背景颜色？

<Tabs style={{backgroundColor:"red"}} renderTabBar={()=> <ScrollableTab />}>
          <Tab heading="Tab1">
            <Tab1 />
          </Tab>
          <Tab heading="Tab2">
            <Tab2 />
          </Tab>
          <Tab heading="Tab3">
            <Tab3 />
          </Tab>
          <Tab heading="Tab4">
            <Tab4 />
          </Tab>
          <Tab heading="Tab5">
            <Tab5 />
          </Tab>
        </Tabs>

Answer 1

要更改Tab背景颜色，我通过传递组件而不是纯文本来使用heading属性。

查看以下示例

...
import { ... Tabs, Tab, TabHeading } from 'native-base';
...
render() {
  return (
    ...
    <Tabs>
     <Tab 
       heading={
          <TabHeading style={{backgroundColor: 'red'}}>
            <Text>Tab 1</Text>
          </TabHeading>
       }
     >
       ...
     </Tab>
     <Tab 
       heading={
          <TabHeading style={{backgroundColor: 'red'}}>
            <Text>Tab 2</Text>
          </TabHeading>
       }
     >
       ...
     </Tab>
    </Tabs>
  );
}

希望这会有所帮助！

Answer 2

只需为<Tab style={{ backgroundColor: 'transparent' }}>组件添加样式，这对我来说效果很好

无法更改Tabs背景颜色

2 个答案: