네이티브 프로그래밍 방식으로 열기 DrawerLayoutAndroid

Question

DrawerLayoutAndroid를 사용하고 있으며 프로그래밍 방식으로 열고 닫는 방법을 고민하고 있습니다. 당신은

은 내가 정확히 워드 프로세서처럼 만든 서랍을 가지고, 그때가 버튼을 가지고있는 DrawerLayoutAndroid을 참조 할

당신이

openDrawer (0)를 사용하는 가정되는 것을 볼 수 있지만 방법 당신이 그것을 누르면 내보기에 나는 내가이 기능

toggleDrawer(){ 
    openDrawer(0); 
}; 

을 만든 DrawerLayoutAndroid

을 열려는하지만 분명히 나던 것을 작업하고 오류를 던집니다.

Answer 1

당신은 이것을 위해 refs를 사용해야합니다. 나는 drawerlayoutandroid 내부

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

(예를 들어,보기) 구성 요소에서 프로그래밍 방식으로 열이있는 경우, 당신은 (함수 openDrawer를 호출해야합니다 참조 용으로 여기에 예를 붙여 넣기) 만하고 ".bind (this)"와 함께. 그렇지 않으면 Jagadish가 썼 듯이 refs를 사용해도 작업을 수행 할 수 없게됩니다 (어쨌든 사용해야 할 것입니다). 제가 방금 쓴 것을 발견 할 때까지 며칠 동안 그 문제가있었습니다. 희망이 도움이됩니다.

Answer 3

you have to Use 

심판 = {_ 서랍 => (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> 
    ); 
    } 
}