react-native - 添加边距/填充以响应导航选项卡会导致内容溢出
问题描述
labelStyle
如下应用会导致顶部出现间隙:
const tabNavigator = createBottomTabNavigator(
{
HomeStack,
RecipesStack,
FavoriteStack,
ProductsStack,
},
{
tabBarOptions: {
activeBackgroundColor: '#8BC540',
inactiveBackgroundColor: '#349746',
activeTintColor: '#F5F4F4', // tab text color
inactiveTintColor: '#F5F4F4',
// This messes up the bottom bar
labelStyle: {
marginTop: 15,
marginBottom: 4,
},
},
}
);
这是它的外观:
我想在图标上方、标签和图标之间以及标签下方添加填充。
解决方案
据我所知,这是由于我用SafeAreaView
.
一旦我删除SafeAreaView
,下面的样式就起作用了:
tabBarOptions: {
activeBackgroundColor: '#8BC540',
inactiveBackgroundColor: '#349746',
activeTintColor: '#F5F4F4', // tab text color
inactiveTintColor: '#F5F4F4',
tabStyle: {
paddingTop: 10,
},
style: {
height: 58,
},
labelPosition: 'below-icon',
labelStyle: {
marginTop: 5,
marginBottom: 4,
},
}
推荐阅读
- mysql - 如何将我的应用程序与部署在 Oracle 云基础架构上的 VM 实例上的 MySQL 企业数据库映像连接起来?
- javascript - 如何在wordpress中存储和更新变量
- hadoop - 打开 Hive 拆分 hdfs 时出错 无法从 ORC 流中读取 SQL 类型 double .commission of type STRING
- php - 如何在 Drupal 7 中连接到 SQL Server?
- c++ - 在 Ubuntu 上创建 Onion Omega 交叉编译环境
- c# - 如何从数据保护 API 获取公钥并共享它?
- javascript - 如何在 Webpack 中构建 dist 文件夹后,得到 Uncaught SyntaxError: Unexpected token '<'
- node.js - npm:引用一个对等依赖;如何从对等依赖项中对齐版本
- c++ - 如何引发 clang 错误:macbook 中 SMFL 配置中的链接器命令失败
- android - 如何将工具栏粘贴到状态栏