反应本地编程打开DrawerLayoutAndroid

Question

我正在使用DrawerLayoutAndroid并努力解决如何编程打开和关闭它。

我看你应该使用

openDrawer（0），但你如何引用DrawerLayoutAndroid

我有我做了完全一样的文档抽屉里，然后我有一个按钮我认为，如果你按下它，我希望它打开DrawerLayoutAndroid

我创造了这个功能

toggleDrawer(){ 
    openDrawer(0); 
}; 

但明显犯规工作，只是抛出一个错误。

Answer 1

你应该为此使用refs。我在这里粘贴的例子，供大家参考

var DrawerExample = React.createClass({ 

     openDrawer:function() { 
      this.refs['myDrawer'].openDrawer(); 
     }, 

     closeDrawer:function() { 
      this.refs['myDrawer'].closeDrawer(); 
     }, 

     render: function() { 
      var navigationView = (
       <View style={{flex: 1, backgroundColor: '#fff'}}> 
        <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text> 

        <TouchableHighlight onPress={this.closeDrawer}> 
         <Text>{'Close Drawer'}</Text> 
        </TouchableHighlight> 

       </View> 
      ); 
      return (
       <DrawerLayoutAndroid ref="myDrawer" 
        drawerWidth={300} 
        drawerPosition={DrawerLayoutAndroid.positions.Left} 
        renderNavigationView={() => navigationView}> 
        <View style={{flex: 1, alignItems: 'center'}}> 
         <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text> 
         <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text> 

         <TouchableHighlight onPress={this.openDrawer}> 
          <Text>{'Open Drawer'}</Text> 
         </TouchableHighlight> 

        </View> 
       </DrawerLayoutAndroid> 
      ); 
     }, 
    }); 

Answer 2

如果你必须从一个组件编程方式打开它（视图，例如），它里面的drawerlayoutandroid，您将需要调用函数openDrawer（），但与“.bind（this）”。否则，即使使用refs，您也无法使其工作，（正如Jagadish写的那样，您仍然需要使用它）。我有这个问题几天，直到我发现我刚写的东西。希望能帮助到你。

Answer 3

you have to Use 

REF = {_抽屉=>（this.drawer = _drawer）}

import React, { Component } from "react"; 
import { 
    Text, 
    View, 
    DrawerLayoutAndroid, 
    TouchableHighlight 
} from "react-native"; 
export default class DrawerExample extends Component { 

    constructor() { 
    super(); 
    this.openDrawer = this.openDrawer.bind(this); 
    } 

    openDrawer() { 
    this.drawer.openDrawer(); 
    } 

    render() { 
    var navigationView = (
     <View style={{ flex: 1, backgroundColor: "#fff" }}> 
     <Text style={{ margin: 10, fontSize: 15, textAlign: "left" }}> 
      I'm in the Drawer! 
     </Text> 
     </View> 
    ); 
    return (
     <DrawerLayoutAndroid 
     drawerWidth={300} 
     ref={_drawer => (this.drawer = _drawer)} 
     drawerPosition={DrawerLayoutAndroid.positions.Left} 
     renderNavigationView={() => navigationView} 
     > 
     <View style={{ flex: 1, alignItems: "center" }}> 
      <Text style={{ margin: 10, fontSize: 15, textAlign: "right" }}> 
      Hello 
      </Text> 
      <Text style={{ margin: 10, fontSize: 15, textAlign: "right" }}> 
      World! 
      </Text> 
      <TouchableHighlight onPress={this.openDrawer}> 
      <Text>{"Open Drawer"}</Text> 
      </TouchableHighlight> 
     </View> 
     </DrawerLayoutAndroid> 
    ); 
    } 
}