antd-mobile的tabbar在页面上拉时被拉起来

Question

一、项目的某页面上拉时tabbar被拉起来

实际情况如图

二、问题出现的环境

经过测试，目前只在iphone7-8之间的这个页面存在这种情况。
这个页面和其他页面的区别只有这是个表单页面，用了rc-form插件
试了一下修改antd-mobile的css,但会被覆盖不起效。

三、相关代码

项目中的tabbar相关代码

<TabBar
        hidden={isMenubar}
        tintColor={theme.primaryColor}
        tabBarPosition="bottom"
        // noRenderContent
        // prerenderingSiblingsNumber={0}
      >
        {tabBarData.map(({ title, icon, selectedIcon, link }) => (
          <TabBar.Item
            key={link}
            title={title}
            icon={<BizIcon type={icon} />}
            selectedIcon={<BizIcon type={selectedIcon} />}
            selected={pathname === link}
            onPress={() => Router.push(`${link}`)}
          >
            {/* 匹配到的children路由进行渲染 */}
            {children.props.location.pathname === link && children}
          </TabBar.Item>
        ))}
      </TabBar><TabBar
        hidden={isMenubar}
        tintColor={theme.primaryColor}
        tabBarPosition="bottom"
        // noRenderContent
        // prerenderingSiblingsNumber={0}
      >
        {tabBarData.map(({ title, icon, selectedIcon, link }) => (
          <TabBar.Item
            key={link}
            title={title}
            icon={<BizIcon type={icon} />}
            selectedIcon={<BizIcon type={selectedIcon} />}
            selected={pathname === link}
            onPress={() => Router.push(`${link}`)}
          >
            {/* 匹配到的children路由进行渲染 */}
            {children.props.location.pathname === link && children}
          </TabBar.Item>
        ))}
      </TabBar>

有没有大神遇到过这种情况，怎么的解决啊？