コンポーネント元ネイティブAndroidで引き出しメソッドopenDrawer（）を使用できません

Question

私は引き出しのメニューコードと引き出しの内容コードのために別のファイルを作成しようとして、反応ネイティブを使用してアンドロイドで引き出しを実装しています。これを行うために、私は異なった反応成分を作りました。私はこれらのファイルですべての作業を行うことができますが、コンポーネントファイルにドロワのいくつかの操作を実行するにはドロワーリファレンスが必要です。ここで私のコードは、どのようにopenDrawer（）のような引き出しメソッドを使用するために、他のコンポーネントファイルに引き出しの参照を渡すことができます。

 'use strict'; 

    var React = require('react-native'); 
    var { View, 
      StyleSheet, 
      TouchableHighlight, 
      } = React; 

    var DrawerLayout = require('react-native-drawer-layout'); 
    var DrawerScreen = require('./DrawerScreen'); 
    var DrawerMenu = require('./DrawerMenu'); 

    var DrawerLayoutExample = React.createClass({ 

     render: function() { 
     var navigationView = (
      <View > 
       <DrawerMenu/> 
      </View> 
     ); 

     return (
      <DrawerLayout 
      onDrawerSlide={(e) => this.setState({drawerSlideOutput: JSON.stringify(e.nativeEvent)})} 
      onDrawerStateChanged={(e) => this.setState({drawerStateChangedOutput: JSON.stringify(e)})} 
      drawerWidth={200} 
      ref={(drawer) => { return this.drawer = drawer }} 
      keyboardDismissMode="on-drag" 
      renderNavigationView={() => navigationView}> 
      <View style={styles.container}> 
// Here is content component for drawer, need to refer drawer reference 
      <DrawerScreen ></DrawerScreen> 
      </View> 
      </DrawerLayout> 
     ); 
     } 
    }); 

    var styles = StyleSheet.create({ 
     container: { 
     alignItems: 'center', 
     justifyContent: 'center', 
     flex: 1, 
     flexDirection: 'column', 
     }, 
    }); 

    module.exports = DrawerLayoutExample; 

DrawerScreen.jsは

'use strict'; 
var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View, 
    Dimensions, 
    Image, 
    TouchableHighlight, 
    TextInput, 
} = React; 

var deviceWidth = Dimensions.get('window').width; 

var DrawerScreen = React.createClass({ 


    render: function() { 
    return (

     <View style={styles.container}> 

      <Text style={styles.welcome}>Content!</Text> 

      <TouchableHighlight onPress={() => this.state.openDrawer()}> 
      <Text>Open drawer</Text> 
      </TouchableHighlight> 
      <TextInput style={styles.inputField} /> 
     </View> 
    ); 
    }, 

}); 

var styles = StyleSheet.create({ 
    container: { 
     alignItems: 'center', 
     justifyContent: 'center', 
     flex: 1, 
      flexDirection: 'column', 
    }, 
    inputField: { 
     backgroundColor: '#F2F2F2', 
     height: 40, 
    }, 
}); 

module.exports = DrawerScreen; 

Answer 1

私はあなたが引き出しを呼び出すために this.state.openDrawer() を使用したことを、問題があると思います。

は

が、これは

を役に立てば幸い this.drawer.openDrawer()

を使用してみてください