向右滑动时不会触发抽屉

时间:2017-04-06 10:00:29

标签: react-native native-base

我正在使用本机反应,我正试图向右滑动屏幕以显示抽屉。我期待在刷卡时看到这个:

enter image description here

以下是我的代码,

import React, { Component } from 'react'
import { Drawer, View } from 'native-base'
import { Navigator } from 'react-native'

export default class AppContainer extends Component {
  constructor(props) {
    super(props)
    this.state = {
      toggled: false,
      store: {},
      theme: null
    }
  }
  toggleDrawer() {
    this.state.toggled ? this._drawer.close() : this._drawer.open()
  }
  openDrawer() {
    this.setState({toggled: true})
  }
  closeDrawer() {
    this.setState({toggled: false})
  }
  renderScene(route, navigator) {
    switch(route) {
      default: {
        return null
      }
    }
  }
  configureScene(route, routeStack) {
    return Navigator.SceneConfigs.PushFromRight
  }
  render() {
    return (
      <Drawer
        ref={(ref) => this._drawer = ref}
        type="displace"
        content={<View style={{backgroundColor: "#000", height: 1000}}/>}
        onClose={this.closeDrawer.bind(this)}
        onOpen={this.openDrawer.bind(this)}
        openDrawerOffset={0.2}
        >
          <Navigator
            ref={(ref) => this._navigator = ref}
            configureScene={this.configureScene.bind(this)}
            renderScene={this.renderScene.bind(this)}
            />
        </Drawer>
    )
  }
}

当我们运行此代码时,我们得到的只是一个空白屏幕。我尝试向右滑动,但抽屉没有出现。

enter image description here

正如我们所看到的,我在渲染功能中返回Drawer组件,但是当我尝试滑动它时,抽屉不会出现。我试图在物理设备和虚拟设备上在Android上运行它,他们不会激活抽屉。可能是什么问题?

1 个答案:

答案 0 :(得分:1)

之后的Drawer组件中
openDrawerOffset={0.2}

添加以下内容:

panOpenMask={0.80}
captureGestures="open"