當選項卡數量增加時，React native Tab View會出現擁塞

Question

我使用react-native-tab-view作為屏幕頂部的顯示選項卡。 屏幕數量增加時屏幕視圖看起來擁擠（超過5）

以下是我的代碼段

export default class CustomTabViewComponent extends React.Component{
state = {
    index: 0,
    routes: [
      { key: 'tab1', title: 'Tab1' },
      { key: 'tab2', title: 'Tab2' },
      { key: 'tab3', title: 'Tab3' },
      { key: 'tab4', title: 'Tab4' },
      { key: 'tab5', title: 'Tab5' },
    ],
  };
render(){
   return(
   <TabView
          navigationState={this.state}
          renderScene={this.renderScene}
          renderTabBar={this._renderTabBar}
          onIndexChange={this.onIndexChange}
          initialLayout={{
            width: Dimensions.get('window').width,
            height: 100,
          }}
        />

)}
}

我發布的圖片也供參考。

是否有任何屬性的幫助我可以使TabView滾動與單獨的選項卡固定寬度？

PS：我已經嘗試使用react-native-scrollable-tab-view但仍然停留在同一個地方。

Answer 1

將renderTabBar prop傳遞給TableView，它返回一個自定義的React Element並返回<TabBar> ，將tabStyle和scrollEnabled={true}到TabBar 。

renderTabBar - 返回一個自定義React元素作為標簽欄的回調函數

TabBar - 材料設計主題標簽欄。

scrollEnabled - 指示是否啟用可滾動選項卡的布爾值。

tabStyle - 要應用於選項卡欄中各個選項卡項的樣式。

import { TabView, SceneMap, TabBar } from 'react-native-tab-view';

<TabView
  navigationState={this.state}
  renderScene={this.renderScene}
  renderTabBar={this._renderTabBar}
  onIndexChange={this.onIndexChange}
  renderTabBar={props => (
    <TabBar
      {...props}
      indicatorStyle={{ backgroundColor: 'white' }}
      tabStyle={{ width: 100 }}
      scrollEnabled={true}
      style={{ backgroundColor: 'blue' }}
    />
  )}
  initialLayout={{
    width: Dimensions.get('window').width,
    height: 100,
  }}
/>

演示