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传递给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,
  }}
/>

Demo

当选项卡数量增加时，响应本机选项卡视图变得拥塞

1 个答案: