jd-opensource / jd-opensource/taro-ui
TabBar未适配iPhone X及以上带Home Indicator的系统
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**问题描述**
- 平台: H5
- 问题描述: 测试了配置式的TabBar和Taro-UI的TabBar, 均未适配iPhone X及以上带Home Indicator的系统, 会造成Home Indicator遮挡TabBar, 容易误操作
- 尝试解决: `app.scss`中添加
```
@supports (bottom: env(safe-area-inset-bottom)) {
.taro-tabbar__tabbar-bottom {
padding-bottom: env(safe-area-inset-bottom);
height: calc(50px + env(safe-area-inset-bottom)) !important;
}
}
```
`index.html`中添加
```
```
未起作用
**复现步骤**
创建带`TabBar`的页面, `TabBar`可以是配置的,也可以是`Taro-UI`的, 然后在手机微信中打开, 或者在`Safari`中打开,点击地址栏中的`隐藏工具栏`,即可发现问题
**期望行为**
TabBar适配iPhone X及以上带Home Indicator的系统
**报错信息**
TabBar未适配iPhone X及以上带Home Indicator的系统
**系统信息**
👽 Taro v3.2.1
Taro CLI 3.2.1 environment info:
System:
OS: macOS 11.2.1
Shell: 5.8 - /bin/zsh
Binaries:
Node: 12.16.1 - /usr/local/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 7.6.3 - /usr/local/bin/npm
npmPackages:
@tarojs/cli: 3.2.8 => 3.2.8
@tarojs/components: 3.2.8 => 3.2.8
@tarojs/mini-runner: 3.2.8 => 3.2.8
@tarojs/react: 3.2.8 => 3.2.8
@tarojs/runtime: 3.2.8 => 3.2.8
@tarojs/taro: 3.2.8 => 3.2.8
@tarojs/webpack-runner: 3.2.8 => 3.2.8
babel-preset-taro: 3.2.8 => 3.2.8
eslint-config-taro: 3.2.8 => 3.2.8
react: ^17.0.0 => 17.0.2
taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.10
Contributor guide
Assessment
This issue has not been assessed yet.