如何使用带有反应原生侧菜单的导航器？答案

【问题标题】：How to use navigator with react native side menu?如何使用带有反应原生侧菜单的导航器？
【发布时间】：2015-10-09 12:08:23
【问题描述】：

native-side-menu 这是我的代码：

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */

 var React = require('react-native');
var SideMenu = require('react-native-side-menu');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
} = React;

var ContentView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
});

var TestView = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to another page.
        </Text>
        <Text style={styles.instructions}>
          Testing react native side menu with navigator.
        </Text>
      </View>
    );
  }
});

var Menu = React.createClass({
  about: function() {
    this.props.menuActions.close();
    this.props.navigator.push({
      component: TestView,
      title: 'Test View',
    });
  },

  render: function() {
    return (
      <View style={styles.sidemenu}>
        <Text style={styles.paddingMenuItem}>Menu</Text>
        <Text onPress={this.about} style={styles.paddingMenuItem}>About</Text>
      </View>
    );
  }
});

var FindWisely = React.createClass({
  render: function() {
    return (
      <Navigator
       initialRoute={{
         component: Something,
         title: 'Something',
       }}
       configureScene={() => {
         return Navigator.SceneConfigs.FadeAndroid;
       }}
       renderScene={(route, navigator) => {
         if(route.component) {
           return React.createElement(route.component, { navigator });
         }
       }}/>
    );
  }
});

var Something = React.createClass({
  render: function() {
    var menu = <Menu navigator={this.props.navigator}/>;
    return (
      <SideMenu menu={menu}>
        <ContentView/>
      </SideMenu>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  sidemenu: {
    paddingTop: 50,
  },
  paddingMenuItem: {
    padding: 10,
  },
});

module.exports = FindWisely;

当我运行它时，我得到：

一个未定义的错误不是一个对象（评估'this.props.menuActions.close'）

【问题讨论】：

标签： react-native

【解决方案1】：

menuActions 在这种情况下是未定义的。要解决此问题，您可以将其作为 <Menu /> 复合组件的 props 传递。

例如：var menu = <Menu navigator={this.props.navigator} menuActions={menuActions}/>;

menuActions 应该定义 close 函数。

（可选）您可以使用isOpen 切换带有状态的侧边菜单。

使用<SideMenu menu={menu} isOpen={this.state.isOpen}> 并将this.props.menuActions.close() 替换为this.setState({isOpen: false}) 以关闭侧边菜单。

【讨论】：

【解决方案2】：

在latest release of react-native-side-menu 中，作者宣布他已从使用menuActions 的道具转换为上下文。你可以在发行说明中阅读它，他甚至给出了an example。

在您的情况下，您将在代码中更改以下权利：

将contextTypes 添加到您的班级菜单。

Menu.contextTypes = {
  menuActions: React.PropTypes.object.isRequired
};

在你的 onPress 方法中像这样访问它：

this.context.menuActions.close();

【讨论】：