如何使 react-native-tab-view 的 TabBar 变小？答案

【问题标题】：How to make TabBar of react-native-tab-view smaller?如何使 react-native-tab-view 的 TabBar 变小？
【发布时间】：2019-07-15 11:56:44
【问题描述】：

我正在使用react-native-tab-view，但是 TabBar 很大，我想把它变小。如何定制它？应用边距/填充 0 不起作用。应用小高度有效，但文本丢失。如何使它更小或更可定制？

<TabView
 ...
                renderTabBar={props =>
                    <TabBar
                        {...props}
                        indicatorStyle={{ backgroundColor: 'white' }}
                        style={{ backgroundColor: 'pink' }}
                        tabStyle={{ backgroundColor: 'teal' }}
                        renderLabel={({ route, focused, color }) => (
                            <Text style={{ color, margin: 8 }}>
                                {route.title}
                            </Text>
                        )}

                }

【问题讨论】：

标签： reactjs react-native react-native-tab-view

【解决方案1】：

尝试将tabStyle 属性用于TabBar。默认是has一个样式：

minHeight: 48,

所以在你的情况下：

<TabView
 ...
  renderTabBar={props =>
      <TabBar
          {...props}
          indicatorStyle={{ backgroundColor: 'white' }}
          style={{ backgroundColor: 'pink' }}
          tabStyle={{ backgroundColor: 'teal', minHeight: 30 }} // here
          renderLabel={({ route, focused, color }) => (
              <Text style={{ color, margin: 8 }}>
                  {route.title}
              </Text>
          )}
    }

【讨论】：