jd-opensource / jd-opensource/taro-ui

TabBar未适配iPhone X及以上带Home Indicator的系统

Open
#1,341 2 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.