Реагировать на собственный вид вкладок, перегруженный при увеличении количества вкладок

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

pass renderTabBar prop в TableView, который возвращает пользовательский элемент React и возвращает <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,
  }}
/>

Демонстрация