react-native – 如何使用导航器与本机侧面菜单进行反应?
发布时间:2020-12-15 05:06:51 所属栏目:百科 来源:网络整理
导读: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,Naviga
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; 当我运行这个时,我得到:
在这种情况下,menuActions未定义.
要解决此问题,您可以将其作为道具传递给< Menu />复合材料. 例如:var menu =< Menu navigator = {this.props.navigator} menuActions = {menuActions} /> ;; 其中menuActions应定义close函数. 可选地,您可以使用isOpen来切换具有状态的侧边菜单. 使用< SideMenu menu = {menu} isOpen = {this.state.isOpen}>并使用this.setState({isOpen:false})替换this.props.menuActions.close()以关闭侧边菜单. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |