React Native "react-native-side-menu“

Question

我试着让侧边菜单工作，我得到了它的功能，但现在我正在努力使onPress功能与一个按钮点击！

“未定义不是对象(计算'this.props.menuActions.toggle')”

它在TouchableOpacity中！

'use strict';

var React = require('react-native');
var SideMenu = require('react-native-side-menu');

var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  ScrollView,
  TouchableOpacity,
} = React;

var Menu = React.createClass({
  render: function() {
    return (
      <ScrollView style={styles.menu}>
      <View style={styles.avatarContainer}>
        <image
          style={styles.avatar}
          source={{
            uri: 'http://pickaface.net/includes/themes/clean/img/slide2.png'
          }}/>
          <Text style={styles.yourname}> Your Name </Text>
        </View>
        <Text style={styles.menuitem}> About </Text>
        <Text style={styles.menuitem}> Music </Text>
      </ScrollView>
    );
  }
});

var Button = React.createClass({
  render: function() {
    return (
      <TouchableOpacity
        onPress={this.props.menuActions.toggle}>
        <Text style={this.props.style}>{this.props.children}</Text>
      </TouchableOpacity>
    );
  }
})

var Layout = React.createClass({
  render: function() {
    return (
      <SideMenu menu={<Menu />}>
        <View style={styles.container}>
          <Text style={styles.welcome}>
            Welcome To React Native!
          </Text>
        </View>
        <Button style={styles.button}> Open Menu </Button>
      </SideMenu>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

AppRegistry.registerComponent('Tabs_Boilerplate', () => Layout);

Answer 1

您必须告诉react，您将希望使用上下文中的menuActions对象

var Button = React.createClass({
    contextTypes = {
        menuActions: React.PropTypes.object.isRequired
    },

    render: function() {
        return (
            <TouchableOpacity
                onPress={this.context.menuActions.toggle}>
                <Text style={this.props.style}>{this.props.children}</Text>
            </TouchableOpacity>
        );
    }
})

或者，他们最近添加了通过道具控制菜单是否打开的功能。只需在侧面菜单对象上添加一个"isOpen“属性，并根据您是否希望打开菜单将该属性更新为true/false即可。