Реагировать на собственную ширину представления вкладок, когда имеется много вкладок

Question

Я использую https://github.com/react-native-community/react-native-tab-view Но моя проблема заключается в

1. Когда имеется много вкладок, он будет отображаться только на экране, а высота будет увеличиваться. То, что я ищу, это фиксированная высота, ширина увеличивается на основе вкладок
2. При перемещении между вкладками, кажется, перезагрузить представление на каждой вкладке

Я ценю все ваши советы, чтобы решить мою проблему. Спасибо

Answer 1

Вы можете указать width: 'auto' в tabStyle

Answer 2

Попробуйте добавить:

scrollEnabled

и задайте ширину в таком стиле:

style={{ width: 300 }}

вы можете прочитать здесь: https://github.com/react-native-community/react-native-tab-view

Answer 3

<TabView
  labelStyle={fontSize:12} //---------->Add this line and reduce the fontsize
  navigationState={this.state}
  onIndexChange={index => this.setState({ index })}
  renderScene={SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  })}
/>

Answer 4

Вам нужно экспортировать заголовок в функцию _renderLabel....

       _renderLabel = ({ route }) => (
           <Text style={styles.label}>{route.title}</Text>
       );

        <TabBar
            {...props}
            scrollEnabled={true}
            renderIndicator={() => null}
            ref={component => this.scrollRef = component}
            renderLabel={this._renderLabel}
            tabStyle={styles.tab}
            style={{ backgroundColor: '#284062'}}
        />

После этого вы можете стилизовать текст:)