taro nutui ActionSheet 如何覆盖掉 tabbar？

Question

现在的效果：

希望的效果：

ActionSheet组件如何才能做到像微信原生组件picker这样覆盖掉tabbar呢？

文档：

https://nutui.jd.com/taro/vue/4x/#/zh-CN/component/actionsheet

Answer 1

零零散散开发过几个小程序，都是直接用上了自定义 Tabbar、自定义页头，这样可以避免层级、自定义样式等一系列问题。

同蹲一个好的解决方法。

Answer 2

在app.tsx 或者 app.jsx 文件）里加一个状态，用来控制 ActionSheet 的显示和隐藏。

// app.tsx
import Taro, { Component } from '@tarojs/taro'
import { View } from '@tarojs/components'
import { ActionSheet } from '@nutui/nutui-taro'
import './app.scss'

class App extends Component {
  state = {
    showActionSheet: false
  }

  componentDidMount () {
    Taro.eventCenter.on('showActionSheet', () => {
      this.setState({ showActionSheet: true })
    })
  }

  componentWillUnmount () {
    Taro.eventCenter.off('showActionSheet')
  }

  render () {
    return (
      <View>
        <ActionSheet
          visible={this.state.showActionSheet}
          list={['选项一', '选项二', '选项三']}
          onCancel={() => this.setState({ showActionSheet: false })}
        />
        {this.props.children}
      </View>
    )
  }
}

export default App

在要显示 ActionSheet 的地方：

Taro.eventCenter.trigger('showActionSheet')