react-native - 当有很多选项卡时反应原生选项卡视图宽度

Question

我正在使用https://github.com/react-native-community/react-native-tab-view 但我的问题是

1. 当有很多标签时，它只会在屏幕上显示，并且高度会扩大。我正在寻找的是高度是固定的，宽度根据标签扩展
2. 在选项卡之间移动时，似乎会重新加载每个选项卡上的视图

感谢您为解决我的问题提供的所有建议。谢谢

Answer 1

您可以指定width: 'auto' 在tabStyle

Answer 2

您需要在 _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'}}
        />

在此之后，您可以设置文本样式:)

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

尝试添加：

scrollEnabled

并给出这样的样式宽度：

style={{ width: 300 }}

你可以在这里阅读更多：https ://github.com/react-native-community/react-native-tab-view