reactjs - 如何使 react-native-tab-view 的 TabBar 变小?
问题描述
我正在使用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>
)}
}
解决方案
尝试使用tabStyle
道具TabBar
。默认情况下,它有一个样式:
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>
)}
}
推荐阅读
- javascript - 想用mail()转换成docx后发送附件
- test-suite - Google Home 设备无法识别测试套件命令
- php - PHP搜索页面超过1页
- python - 在 python 中遍历一个漂亮的汤数组
- node.js - 如何在 Typescript 中表示抽象类的任何子类的类型?
- git - 列出匹配多个模式的 git 分支
- javascript - 通过 Azure Functions UI 删除 CosmosDB 文档
- sql-server - Docker Ubuntu 18.04 无法安装 msodbcsql17 SQL Server ODBC 驱动程序 17
- jprofiler - 为什么调用显示“n/a”?
- javascript - Joi 验证:用户名不能是电子邮件地址