这里的本地菜单是我的代码:
/**
* 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;
当我运行这个时,我得到:
an error undefined is not an object (evaluating 'this.props.menuActions.close')
最佳答案
menuActions
在这种情况下是未定义的。
要解决此问题,您可以将其作为来自 <Menu />
的 Prop 传递。复合组件。
例如: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})
关闭侧面菜单。
关于react-native - 如何将导航器与 react native 侧菜单一起使用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33037910/