无法在组件 React Native Android 中使用 Drawer 方法 openDrawer()答案

【问题标题】：Unable to use Drawer method openDrawer() in component React Native Android无法在组件 React Native Android 中使用 Drawer 方法 openDrawer()
【发布时间】：2016-05-27 00:18:37
【问题描述】：

我正在使用 react native 在 android 中实现 Drawer，并尝试为抽屉菜单代码和抽屉内容代码创建不同的文件。为此，我创建了不同的反应组件。我可以在这些文件中完成所有工作，但我需要抽屉参考来执行组件文件中抽屉的一些操作。这是我的代码，如何将抽屉的引用传递给其他组件文件以使用 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;

【问题讨论】：

标签： android reactjs react-native

【解决方案1】：

我想问题是，你使用 this.state.openDrawer() 打电话给抽屉。

尝试使用 this.drawer.openDrawer()

希望对你有帮助

【讨论】：