web-dev-qa-db-ja.com

ネイティブベースのタブをカスタマイズする

画像に示すように、反応するネイティブアプリケーションのネイティブベースからタブをカスタマイズする（背景色を変更する）必要があります enter image description here

私はすでにこれを試しましたstyle={{ backgroundColor: '#C0C0C0' }}しかし、私はデフォルトのテーマを取得し続けます。

androidiosreact-nativetabsnative-base
10
user3521011

以下のようなネイティブベースタブに独自のスタイルを適用できます。

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
    <Tab heading="Popular" tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
        // tab content
    </Tab>
</Tabs>
50
Irfan Ali

TabHeading見出しの代わりにstringを使用してコンポーネントを使用している場合は、tabStyleでtextStyle、Tab小道具を使用、またはTabHeadingは機能しません（少なくとも現時点では）。 TabHeading、Icon、およびTextを手動でスタイル設定する必要があります。

以下に例を示します-

これは機能しません

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
   <Tab heading={<TabHeading>
                 <Icon name="icon_name" />
                 <Text>Popular</Text>
               </TabHeading>}  
      tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} 
      activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading>
                 <Icon name="icon_name" />
                 <Text>Popular</Text>
               </TabHeading>} 
      tabStyle={{backgroundColor: 'red'}} textStyle={{color: '#fff'}} 
      activeTabStyle={{backgroundColor: 'red'}} activeTextStyle={{color: '#fff', fontWeight: 'normal'}}>
       // tab content
   </Tab>
</Tabs>

tabStyleやその他の小道具をTabHeadingコンポーネントに移動しても機能しません。

しかし、これは動作します

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}}>
   <Tab heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={{backgroundColor: 'red'}}>
                 <Icon name="icon_name" style={{color: '#ffffff'}} />
                 <Text style={{color: '#ffffff'}}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

アクティブなタブスタイルの切り替えが必要な場合

<Tabs tabBarUnderlineStyle={{borderBottomWidth:2}} initialPage={this.state.currentTab} onChangeTab={({ i }) => this.setState({ currentTab: i })}>
   <Tab heading={<TabHeading style={this.state.currentTab == 0 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 0 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
   <Tab 
       heading={<TabHeading style={this.state.currentTab == 1 ? styles.activeTabStyle : styles.inactiveTabStyle}>
                 <Icon name="icon_name" style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle} />
                 <Text style={this.state.currentTab == 1 ? styles.activeTextStyle : styles.inactiveTextStyle}>Popular</Text>
               </TabHeading>}>
       // tab content
   </Tab>
</Tabs>

私は解決策を試してみました。 それはひどい！（私の意見では）。

だから私は元の答えに行き、タブの見出しにアイコンがないことを決めました（状態変更の遅延を扱うよりも支払う方が良い価格でした）

また、tabStyleとpropsのその他のTabHeadingがあることに気づいたので、彼らはそれに取り組んでいるのかもしれませんが、これは現時点でのバグですか？

enter image description here

とにかく、私はこれを指摘したかっただけです。

17
Aswin Ramakrishnan

試行：

<ScrollableTab style={{borderBottomWidth: 0, backgroundColor: 'some_color'}} 
/>

または

<TabHeading style={{
                backgroundColor: 'some_color',
                borderBottomWidth: 0,
}}>

または以下のprop/attributeをコンポーネントに追加：

tabBarUnderlineStyle={{backgroundColor: '#eff2f8'}}
0
anoNewb

TabsコンポーネントのrenderTabBarメソッドでScrollableTabを使用している場合、上記の例は部分的なソリューションであり、TabsおよびTabコンポーネントのネストされたコンポーネントに目的のスタイルを適用する必要があることに注意してください。そのため、ScrollableTabコンポーネントを使用している場合は、ScrollableTabコンポーネントにスタイルを直接適用することをお勧めします。以下の例を確認してください。

<Tabs renderTabBar={() => <ScrollableTab style={{ backgroundColor: "your colour" }} />}>
 Your Tab Content
</Tabs>

詳細については、「 このgithubの問題 」を参照してください

0
KMD