Native Base Drawer无效

Question

我试图在我的反应原生应用程序中创建抽屉。我按照给出的例子，但仍然无法打开抽屉。

以下是我的代码：

#drawer.js

export default class TalentDrawer extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {
    return (
       <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<Sidebar/>}
        panOpenMask={0.80}
        onClose={this.closeDrawer.bind(this)}
        onOpen={this.openDrawer.bind(this)}
        captureGestures="open"
        side="right"
        >
        <Dashboard openDrawer={this.openDrawer.bind(this)}/>
        </Drawer>
    );
  }
}

#dashboard.js
export default class Dashboard extends Component {
  render() {
    return (
        <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}>
            <Button onPress={()=>this.props.openDrawer()}>
            <Text>Hello</Text>
            </Button>
        </View>
    );
  }
}

我也遵循针对问题Github的指示，仍然无法让这个抽屉为我工作。有人遇到过同样的问题吗？在原生基础网站上给出的示例没有显示完整的工作示例。

Answer 1

您的代码需要进行一些更改

由于dashboard.js不处理状态，我们可以将类更改为函数。

drawer.js

export default class TalentDrawer extends Component {
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
    this.drawer._root.open()
  };
  render() {
    return (
       <Drawer
        ref={(ref) => { this.drawer = ref; }}
        content={<Sidebar/>}
        panOpenMask={0.80}
        onClose={this.closeDrawer}
        onOpen={this.openDrawe}
        captureGestures="open"
        side="right"
        >
        <Dashboard openDrawer={this.openDrawer}/>
        </Drawer>
    );
  }
}

dashboard.js

const Dashboard = (props) => {
    return (
        <View style={{flex:1, alignItems:'center', justifyContent: 'center'}}>
            <Button onPress={props.openDrawer}>
            <Text>Hello</Text>
            </Button>
        </View>
    );
  }
}

Answer 2

你应该做

closeDrawer = () => {
  this.refs.drawer.close()
};
openDrawer = () => {
  this.refs.drawer.open()
};