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 不处理状态，我们可以将类更改为函数。

抽屉.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> ); } }

仪表板.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()
};