如何在React Native侧边菜单中使用导航器？

Question

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'）”

- Hussian Shaik

Answer 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})以关闭侧边栏菜单。

- chinloong

Answer 2

在最新版本的react-native-side-menu中，作者宣布他已经从使用props来处理menuActions转为使用context。您可以在发布说明中阅读到这一点，他甚至提供了一个示例。

在您的情况下，您需要在代码中进行以下更改：

将contextTypes添加到您的Menu类中。

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

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

this.context.menuActions.close();

- webwelten